简单的jq图片懒加载实现

<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')

}

}

})

})

})