實(shí)現(xiàn)圖片懶加載的方法

這篇文章將為大家詳細(xì)講解有關(guān)實(shí)現(xiàn)圖片懶加載的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

實(shí)現(xiàn)懶加載的方法：首先自定義屬性如【data-imgurl】，存放著圖片的路徑；然后通過js判斷界面滾動的位置或圖片是否已加載；最后加載再去獲取屬性【data-imgurl】的值賦給src即可。

實(shí)現(xiàn)圖片懶加載的方法：

首先自定義屬性如【data-imgurl】，存放著圖片的路徑；然后通過js判斷界面滾動的位置或圖片是否已加載；最后加載再去獲取屬性【data-imgurl】的值賦給src即可。

實(shí)現(xiàn)圖片的加載，具體做法如下：

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

1.判斷目標(biāo)標(biāo)簽是否出現(xiàn)在視野中：

function checkShow($img) { // 傳入img對象
        var sTop = $(window).scrollTop();  //即頁面向上滾動的距離
        var wHeight = $(window).height(); // 瀏覽器自身的高度
        var offsetTop = $img.offset().top;  //目標(biāo)標(biāo)簽img相對于document頂部的位置
        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2個(gè)臨界狀態(tài)之間的就為出現(xiàn)在視野中的
            return true;
        }
        return false;
    }

2.判斷目標(biāo)標(biāo)簽是否已經(jīng)被加載過：

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

3.加載目標(biāo)標(biāo)簽：

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

關(guān)于實(shí)現(xiàn)圖片懶加載的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。