何为懒加载？第一次看见这个词我是
从字面意义上完全不能理解加载为何还有个“懒”字。其实懒加载是用以优化网页加载图片等较大文件的一种方法，其中心思想为：用户看不到，网页就先不加载，当用户需要看到的时候，再加载给用户。这样最大的好处，就是避免了图片集中加载，造成网页crash。像轮播，长页面的图片加载多使用懒加载这种方式。
那具体该怎么做呢？
- 在原本该出现图片的地方，造一个展窗（自定义宽高的div），或是让网页同时先填满一个原图一般大的空白图片。
- 将图片真实的地址藏在一个自定义属性中，当判断用户已经需要看图片时，将该地址赋给
<img>的[src]属性或是CSS的background-image:url()中；
所以思路就很清晰了：造盒子——》写判断函数——》狸猫换太子。
判断函数：判断一个元素是否出现在窗口可视范围
function isVisible($node) {
var scrollTop = $(window).scrollTop();
var winH = $(window).height();
var nodeTop = $node.offset().top;
var nodeButtom = nodeTop + $node.height();
return nodeTop < scrollTop + winH && nodeButtom > scrollTop;
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true
function inVisible($node) {
var srollTop = $(window).scrollTop();
var winH = $(window).height();
var nodeTop = $node.offset().top;
var nodeButtom = nodeTop + $node.height();
return nodeTop < srollTop + winH && nodeButtom > screenTop;
}
$(window).on("scroll",function () {
if(inVisible($(".object"))){
console.log(true);
}
});
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。
var $object = $(".object")
function inVisible($node) {
var srollTop = $(window).scrollTop();
var winH = $(window).height();
var nodeTop = $node.offset().top;
var nodeButtom = nodeTop + $node.height();
return nodeTop < srollTop + winH && nodeButtom > screenTop;
}
$(window).on("scroll",function () {
if($object.attr("isShow")) return;
if(inVisible($object)){
$object.attr("isShow",true);
console.log(true);
}
});
