图片懒加载

在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。—— 廖雪峰 使用jQuery实现图片懒加载原理

基本思想是：在输出HTML的时候，不要直接输出
当页面滚动时，如果图片出现在用户视野中，就利用jQuery把的src属性替换为data-src的内容，浏览器就会实时加载。

---

1. 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

原理示意图：

整个高度是document的高度，虚线代表用户浏览器视窗。
正方块和三角形代表了同一个元素的两种极值。
当一个元素由下至上进入用户视野，假设他刚好在视窗下方，此时会满足：target height（元素的offset） <= scrollTop + window height ，即滚动条已滚动的top值 + 窗口高度，只要target height 小于都可以，但大于的话，说明元素还是看不到，没有进入window。
另外一个情况就是，target height也必须大于scrollTop，否则也是没有进入用户window。

检测函数：

        function isVisible($node) {
            var scrollTop = $(window).scrollTop();  // 获取滚动条滚动高度
            var windowHeight = $(window).height();  // 获取视窗高度
            var offsetTop = $img.offset().top;      // 获取元素相对整个文档的高度

            if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                return true;
            }
            return false;
        }

2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true

测试代码：

222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
333

222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222

---

4. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。

    $(".img img").attr("sign","false");
        $(window).on("scroll",function() {
            $(".img img").each(function() {    // 对元素使用isVisible()检测
                if (isVisible($(this)) && $(this).attr("sign") === "false") {

                    $(this).attr("sign","true");
                    console.log(true);

                }
            })
        })



        function isVisible($node) {
            var scrollTop = $(window).scrollTop();  // 获取滚动条滚动高度
            var windowHeight = $(window).height();  // 获取视窗高度
            var offsetTop = $node.offset().top;      // 获取元素相对整个文档的高度

            if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                return true;
            }
            return false;
        }

---