图片延迟加载

页面中图片比较多，用到一个图片延迟加载的效果

主要原理是判断当图像出现在当前窗口的时候才显示src 中的属性值

核心代码是这里

$(window).scroll(function  () { // 滚动的时候判断显示
var srcollHeigt = $(window).scrollTop();
$("img").each(function  () {
var getHeight = $(this).offset().top;
if (getHeight-srcollHeigt < windowHeight  ) {
$(this).attr("src", $(this).attr("data-src") )
}
})
})

如果页面是在中间进行重加载，那就是需要考虑，当图片的位置处在 当前窗口显示区域时候要加载图片

所以判断条件是，当图片头部或者图片底部处在当前窗口内，此图片进行加载

(getBottomHeight>srcollHeigt && getBottomHeight < srcollHeigt + windowHeight)
||
(getTopHeight<srcollHeigt + windowHeight &&  getTopHeight > srcollHeigt )

点击查看实例