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

这篇文章主要介绍web中网站首页的图片延迟加载是怎么实现的，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

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

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

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

怎么一开始隐藏图片呢，很简单，,给一个浏览器不认识的属性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();}

以上是"web中网站首页的图片延迟加载是怎么实现的"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！