jQuery img懶加載是一種優(yōu)化網(wǎng)站的方法，可以在頁面中有很多圖片需要加載的情況下，減小頁面加載時(shí)間，提高用戶體驗(yàn)。下面給大家介紹一下如何使用jQuery實(shí)現(xiàn)圖片懶加載。

$(function() {
// 找到需要懶加載的圖片
var lazyImg = $('img[data-src]');
// 圖片進(jìn)入可視區(qū)域時(shí)加載
$(window).on('scroll', function() {
lazyImg.each(function() {   
if(isVisible($(this))) {
$(this).attr('src', $(this).data('src'));
$(this).removeAttr('data-src');
}
});
});
// 判斷圖片是否在可視區(qū)域
function isVisible($img) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var imgTop = $img.offset().top;
if(imgTop - scrollTop - windowHeight<= 0) {
return true;
} else {
return false;
}
}
});

在上面的代碼中，首先找到需要懶加載的圖片，即data-src屬性存在的img標(biāo)簽。接著，監(jiān)聽滾動(dòng)事件，當(dāng)圖片進(jìn)入可視區(qū)域時(shí)，將data-src屬性的值賦給src屬性，實(shí)現(xiàn)圖片懶加載。最后定義了一個(gè)isVisible函數(shù)，用于判斷圖片是否在可視區(qū)域。

通過使用jQuery實(shí)現(xiàn)圖片懶加載，可以減小頁面加載時(shí)間，提高用戶體驗(yàn)。但是需要注意的是，在性能較差的設(shè)備上，滾動(dòng)時(shí)加載大量圖片可能會(huì)導(dǎo)致卡頓，所以需要注意頁面的性能優(yōu)化。