實現圖片懶加載的方法

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

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

實現圖片懶加載的方法：

首先自定義屬性如【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屬性
    }

關于實現圖片懶加載的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。