web中網(wǎng)站首頁的圖片延遲加載是怎么實現(xiàn)的

這篇文章主要介紹web中網(wǎng)站首頁的圖片延遲加載是怎么實現(xiàn)的，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

隨著頁面信息越來越豐富飽滿，尤其像淘寶，京東之類的購物網(wǎng)站，首頁就是他們的生命線！

最近在做某銀行的網(wǎng)站，只有擠上首頁才能得到更多的關注，于是乎各種業(yè)務人員就開始了首頁位置之爭，為了平息他們的戰(zhàn)亂。首頁囊括了他們?nèi)康男枨?，他們滿意的走人了，結果技術經(jīng)理來了，說首頁加載怎么這么大，于是乎，減！?。?/p>

首當其沖，縮小圖片K數(shù)，不夠，那怎么辦，好吧，進入正題。長頁面未顯示的部分可以先不加載，省流量就是省錢，開搞?。?！

思路就是，判斷圖片在頁面中的位置，如果圖片的位置大于小于當前的屏幕高度，那么顯示圖片，否則隱藏圖片。

怎么一開始隱藏圖片呢，很簡單，<img csii_src="1.png" alt="圖片延遲加載實現(xiàn)原理">,給一個瀏覽器不認識的屬性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]);
                }//歡迎加入全棧開發(fā)交流圈一起學習交流：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++;
            }//歡迎加入全棧開發(fā)交流圈一起學習交流：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;
    }//歡迎加入全棧開發(fā)交流圈一起學習交流：1007317281

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

以上是“web中網(wǎng)站首頁的圖片延遲加載是怎么實現(xiàn)的”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！