如何實現圖片懶加載

前言：得空要整理一下（備忘），在圖片資源比較多的時候怎么實現懶加載

大致思路是：

      首先先自定義屬性如:data-imgurl,存放着圖片的路徑，然后通過js判斷界面滾動的位置/圖片是否已加載，

未加載再去獲取屬性data-imgurl的值賦給src，

實現圖片的加載。具體做法如下：

$('img').each(function () {//在未觸發滾動事件時先判斷圖片是否已經出現在視窗中，打開頁面時先遍歷一次
if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this));//加載當前img  } })
$(window).on('scroll',function () {//滾動的觸發事件
        $('img').each(function () {//遍歷img標簽
            if (checkShow($(this)) && !isLoaded($(this)) ){
                loadImg($(this));//加載當前img
            }
        })
    })
function checkShow($img) {}；// 定義checkShow函數判斷當前img是否已經出現在了視野中，傳入img對象
function isLoaded ($img) {}；//定義isLoaded函數判斷當前img是否已經被加載過了
function loadImg ($img) {}；//定義loadImg函數加載圖片

1.判斷目標標簽是否出現在視野中：

function checkShow($img) { // 傳入img對象
        var sTop = $(window).scrollTop();  //即頁面向上滾動的距離
        var wHeight = $(window).height(); // 瀏覽器自身的高度
        var offsetTop = $img.offset().top;  //目標標簽img相對於document頂部的位置

        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2個臨界狀態之間的就為出現在視野中的
            return true;
        }
        return false;
    }

2.判斷目標標簽是否已經被加載過：

 function isLoaded ($img) {
        return $img.attr('data-imgurl') === $img.attr('src'); //如果data-imgurl和src相等那么就是已經加載過了
    }

3.加載目標標簽：

  function loadImg ($img) {
        $img.attr('src',$img.attr('data-imgurl')); // 把自定義屬性中存放的真實的src地址賦給src屬性
    }