<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

<img data-src='./imgfile/img1.jpg' alt="">

 

emmm...上來不要給img賦值 src屬性  空值 src=' '也不要賦 ，只要有src屬性 瀏覽器就去解析這個src  而後向後臺發送http請求，，，既然是性能優化，又發送這麼多無用的請求，你懂的。。。

 

$(function(){

var windowHeight=$(window).height()

var imgLazys=$.map($('img[data-src]').get(),function(item,index){

$(item).attr('data-isload',false) //有data-src屬性的Img 先都賦屬性data-isload 值爲 false  表示是否加載了

if(item.offsetTop<windowHeight){

$(item).attr('data-isload',true) //表示加載過了

item.src=$(item).data('src')

}

return item

})

$(window).scroll(function(){

var scrollTop=$(document).scrollTop()

imgLazys.forEach(function(item,index){

 

if(!$(item).data('isload')){//若是沒加載

if(item.offsetTop-scrollTop<windowHeight-200){//若是圖片在可見區域內了

$(item).data('isload',true)

item.src=$(item).data('src')

}

}

})

})

})