网站首页的图片延迟加载是怎么实现的？

随着页面信息越来越丰富饱满，尤其像淘宝，京东之类的购物网站，首页就是他们的生命线！

最近在做某银行的网站，只有挤上首页才能得到更多的关注，于是乎各种业务人员就开始了首页位置之争，为了平息他们的战乱。首页囊括了他们全部的需求，他们满意的走人了，结果技术经理来了，说首页加载怎么这么大，于是乎，减！！！

首当其冲，缩小图片K数，不够，那怎么办，好吧，进入正题。长页面未显示的部分可以先不加载，省流量就是省钱，开搞！！！

思路就是，判断图片在页面中的位置，如果图片的位置大于小于当前的屏幕高度，那么显示图片，否则隐藏图片。

怎么一开始隐藏图片呢，很简单，<img csii_src="1.png" alt="图片延迟加载实现原理">,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧，上代码了。

function lazyLoad() {
    var map_element = {};
    var element_obj = [];
    var download_count = 0;
    var last_offset = -1;
    var doc_body = null;
    var doc_element = null;
    var lazy_load_tag = [];

    function initVar(tags) {
        doc_body = document.body;
        doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement;
        lazy_load_tag = tags || ["img", "iframe"];
    };

    function initElementMap() {
        for (var i = 0,
        len = lazy_load_tag.length; i < len; i++) {
            var el = document.getElementsByTagName(lazy_load_tag[i]);
            for (var j = 0,
            len2 = el.length; j < len2; j++) {
                if (typeof(el[j]) == "object" && el[j].getAttribute("csii_src")) {
                    element_obj.push(el[j]);
                }//欢迎加入全栈开发交流圈一起学习交流：1007317281
            }
        }
        for (var i = 0,
        len = element_obj.length; i < len; i++) {
            var o_img = element_obj[i];
            var t_index = getAbsoluteTop(o_img);
            if (map_element[t_index]) {
                map_element[t_index].push(i);
            } else {
                var t_array = [];
                t_array[0] = i;
                map_element[t_index] = t_array;
                download_count++;
            }//欢迎加入全栈开发交流圈一起学习交流：1007317281
        }
    };

    function initDownloadListen() {
        if (!download_count) return;
        /*var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop
        : doc_element.scrollTop;*/
        var offset;
        if (os.firefox) {
            offset = doc_element.scrollTop;
        } else {
            offset = doc_body.scrollTop;
        }
        var visio_offset = offset + doc_element.clientHeight;
        if (last_offset == visio_offset) {
            // setTimeout(initDownloadListen, 200);
            return;
        }
        last_offset = visio_offset;
        var visio_height = doc_element.clientHeight;
        var img_show_height = visio_height + offset + 20;
        for (var key in map_element) {
            if (img_show_height > key) {
                var t_o = map_element[key];
                var img_vl = t_o.length;
                for (var l = 0; l < img_vl; l++) {
                    element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("csii_src");
                }
                delete map_element[key];
                download_count--;
            }
        }
        // setTimeout(initDownloadListen, 200);
    };

    function getAbsoluteTop(element) {
        if (arguments.length != 1 || element == null) {
            return null;
        }
        var offsetTop = element.offsetTop;
        while (element = element.offsetParent) {
            offsetTop += element.offsetTop;
        }
        return offsetTop;
    }//欢迎加入全栈开发交流圈一起学习交流：1007317281

    function init(tags) {
        initVar(tags);
        initElementMap();
        initDownloadListen();
        $(window).scroll(function() {
            initDownloadListen();
        });
    };
    init();
}

结语

感谢您的观看，如有不足之处，欢迎批评指正。
获取资料👈👈👈
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：👉👉👉1007317281👈👈👈，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。