图片懒加载

作者: DHFE | 来源:发表于2018-05-24 17:33 被阅读7次

项目优化
JS
图片懒加载
图片懒加载
js 实现图片懒加载
图片懒加载和预加载
selenuim和phantonJs处理网页动态加载数据的爬取
懒加载和瀑布流
jquery懒加载、回到顶部
懒加载和预加载

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

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

基本思想是：在输出HTML的时候，不要直接输出<img src="xxx"，而是将src的真正图片地址保存在data-src属性中。
当页面滚动时，如果图片出现在用户视野中，就利用jQuery把<img>的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

测试代码：

<body>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>333</h1>
<h1><img id="test_img" src="./img/img1.jpg" alt=""></h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>
<h1>222</h1>

</body>
<script>
        $(window).on("scroll",function() {
            $("#test_img").each(function() {    // 对元素使用isVisible()检测
                if (isVisible($(this))) {
                    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;
        }
</script>

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;
        }