懒加载的原理

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

优点：这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

代码实现

既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内：

function isVisible($node){

var winH = $(window).height(),scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top;

if (offSetTop < winH + scrollTop) {

return true;

} else {

return false;

}

}

再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内：

$(window).on("scroll", function{

if (isVisible($node)){

console.log(true);

}

})

我们已经很接近了，现在我们要做的是，让元素只在第一次被检查到时打印true，之后就不再打印了

var hasShowed = false; $(window).on("sroll",function{

if (hasShowed) {

return;

} else {

if (isVisible($node)) {

hasShowed = !hasShowed; console.log(true);

}

}

})