1.前言
為什么使用懶加載？
原因很簡單：在頁面中（尤其是很長的頁面中）一次性加載所有圖片波势，網(wǎng)絡(luò)請(qǐng)求代價(jià)太高翎朱，想象一下看官老爺想去買一件衣服橄维，光首頁加載圖片就花掉幾分鐘，是不是感覺吃了shi拴曲？
什么是懶加載争舞？
明白了上面的場(chǎng)景之后，懶加載就很好解釋了：在需要的時(shí)候加載圖片
也就引出了懶加載的原理：
- 當(dāng)window檢測(cè)到需要加載的內(nèi)容出現(xiàn)在window邊緣澈灼，就加載
- 否則不對(duì)img 標(biāo)簽中的src賦值
function：判斷時(shí)候出現(xiàn)在屏幕邊緣 返回值為ture或者false
function isShow($node){
windowHeight=$(window).height(),
scrollTop=$(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight+scrollTop>offsetTop&&scrollTop<offsetTop+nodeHeight){return true;}
else{return false;}
}
function: 將圖片標(biāo)簽中的data-src自定義屬性中的值（真正的圖片url）復(fù)制給圖片中的src以加載圖片
function showImg($imgs){
$imgs.each(function(){
var imgUrl = $(this).attr('data-src');
$(this).attr('src',imgUrl);
$(this).addClass('shown');
})
}
讓我們愉快的把兩個(gè)函數(shù)串聯(lián)起來～
$(window).on('scroll',function(){
$('.container img').not('.shown').each(function(){
if(isShow($(this))){
showImg($(this))
}
})
})
我的github主頁可以下載
