图片的懒加载

背景和原理

浏览器在解析网页时会解析整个HTML代码，一般情况下，浏览器会请求其中所有的图片并把它们都下载下来(虽然并不会阻塞后续的渲染)，但当图片很多而网络速度不够快时，这还是会照成页面加载时的卡顿(作为<img> 内容的图片和作为背景的图片互相抢网速)；而且对于移动端用户，会因只想点进来看一下而耗费不少的流量。这时，如果使图片按需加载，则能一定程度上缓解页面加载时的卡顿，也能使移动端用户不会浪费不该浪费的流量。

实现懒加载的原理为把 <img> 的 src 属性设置为预加载的图片或者设为空，把图片的真实路径设置在 data-src 之类的属性中；在需要加载图片的时候用 data-src 属性的内容替换掉 src 属性的内容，浏览器会进行实时加载。

实现

其中一种情况为监听浏览器的滚动条，当滚动条滚到图片的位置时，加载该图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LazyloadImage</title>
    <style>
        img {
            display: block;
            margin-bottom: 10px;
            min-height: 250px;
        }
    </style>
</head>
<body>
    <img src = "loading.gif" data-src = "demo1.jpg" />
    <img src = "loading.gif" data-src = "demo2.jpg" />
    <img src = "loading.gif" data-src = "demo3.jpg" />
    <img src = "loading.gif" data-src = "demo4.jpg" />
    <img src = "loading.gif" data-src = "demo5.jpg" />
    <img src = "loading.gif" data-src = "demo6.jpg" />
    <img src = "loading.gif" data-src = "demo6.jpg" />
    
    <script>

        var imgList = document.getElementsByTagName('img');
        var len = imgList.length;
        var n = 0;

        window.onscroll = function() {
            var usrHeight = document.documentElement.clientHeight;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
            for(let i = n; i < len; i++) {
                if(imgList[i].offsetTop < usrHeight + scrollTop) {
                    if(imgList[i].getAttribute('src') == './loading.gif') {
                        imgList[i].src = imgList[i].getAttribute('data-src');
                    }
                    n = i + 1;
                }
            }
        }

        var event = new UIEvent('doScroll');
        event.initUIEvent('scroll', true, false, window, 0);
        window.dispatchEvent(event);

    </script>
</body>
</html>

scrollTop: Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
本例中，scrollTop 为获取到浏览器滚动的距离(屏幕顶部与HTML页面的距离)。

clientHeight: Element.clientHeight 属性(只读)获取元素内部高度的单位像素，包含内边距，但不包括水平滚动条、边框和外边距。
本例中，usrHeight 为获取页面可视区域(浏览器的显示区域)的高度。

offsetTop: Element.offsetTop 属性(只读)获取元素距根元素顶部的距离。
本例中imgList[i].offsetTop 为获取各个图片在页面的 Y轴位置(与根元素顶部的距离)。

最后调用一下 UIEvent (用户界面事件)来触发 window.onscroll 来初始化(使一开始出现在可视区域的图片加载)。

另一种情况为初始时显示预加载的图片，用户点击图片后再加载该图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clickLoad</title>
    <style>
        img {
            display: block;
            margin-bottom: 10px;
            min-height: 250px;
        }
    </style>
</head>
<body>
    <div id = "img-list">
        <img src = "loading.gif" data-src = "demo1.jpg" />
        <img src = "loading.gif" data-src = "demo2.jpg" />
        <img src = "loading.gif" data-src = "demo3.jpg" />
        <img src = "loading.gif" data-src = "demo4.jpg" />
        <img src = "loading.gif" data-src = "demo5.jpg" />
        <img src = "loading.gif" data-src = "demo6.jpg" />
        <img src = "loading.gif" data-src = "demo6.jpg" />
    </div>
    <script>
        var imgList = document.getElementsByTagName('img');
        var len = imgList.length;

        document.getElementById("img-list").addEventListener("click", function(e){
            var e = e || window.e;
            if(e.target.src != e.target.getAttribute("data-src")) {
                e.target.src = e.target.getAttribute("data-src");
            }
            e.stopPropagation();
        }, false);
    </script>
</body>
</html>

通过事件冒泡，使点击事件冒泡给父元素来处理；其中 e 为事件驱动源，在本例中其保存了被点击元素的信息，通过其替换 src 为 data-src 的内容来实现图片的加载。