简单的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\')

}

}

})

})

})