網站首頁的圖片延遲加載是怎麼實現的？

隨着頁面信息愈來愈豐富飽滿，尤爲像淘寶，京東之類的購物網站，首頁就是他們的生命線！

最近在作某銀行的網站，只有擠上首頁才能獲得更多的關注，因而乎各類業務人員就開始了首頁位置之爭，爲了平息他們的戰亂。首頁囊括了他們所有的需求，他們滿意的走人了，結果技術經理來了，說首頁加載怎麼這麼大，因而乎，減！！！

首當其衝，縮小圖片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，快速升職加薪，走上人生巔峯。