如何實現圖片懶加載？

實作懶載入的方法：首先自訂屬性如【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属性
    }

相關學習推薦：

javascript影片教學

以上是如何實現圖片懶加載？的詳細內容。更多資訊請關注PHP中文網其他相關文章！