懒加载

何为懒加载？第一次看见这个词我是

从字面意义上完全不能理解加载为何还有个“懒”字。其实懒加载是用以优化网页加载图片等较大文件的一种方法，其中心思想为：用户看不到，网页就先不加载，当用户需要看到的时候，再加载给用户。这样最大的好处，就是避免了图片集中加载，造成网页crash。像轮播，长页面的图片加载多使用懒加载这种方式。

那具体该怎么做呢？

• 在原本该出现图片的地方，造一个展窗（自定义宽高的div），或是让网页同时先填满一个原图一般大的空白图片。
• 将图片真实的地址藏在一个自定义属性中，当判断用户已经需要看图片时，将该地址赋给的[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);
    }
});