前端之js-懒加载

实现思路：先将所有图片的路径存放在自定义属性中，到达位置（图片距离页面顶部的距离小于滚动过的距离+屏幕视口的高度），将自定义属性中的路径重新赋给图片的路径，展示到页面中

   var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
    var n = 0;
    // 页面载入完毕加载可视区域内的图片
    lazyload();                                
    window.onscroll = lazyload;
    // 监听页面滚动事件
    function lazyload() {
        // 可见区域高度
        var seeHeight = document.documentElement.clientHeight;
        // 滚动条距离顶部高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }