懶加載——網頁圖片的加載技術

raise_yang 發布于2019-08-21 10:43 / 884人閱讀

摘要：首先，在頁面中準備一個為的在這個中放一個中準備了一些然而這些都有一個的屬性，準備著圖片的地址，具體結構如下圖片的動態加載就是通過讀取元素，然后獲得元素的屬性的值賦予動態創建的圖片的，從而實現了圖片的創建。

目前，網絡上各大論壇，尤其是一些圖片類型的網站上，在圖片加載時均采用了一種名為懶加載的方式，具體表現為，當頁面被請求時，只加載可視區域的圖片，其它部分的圖片則不加載，只有這些圖片出現在可視區域時才會動態加載這些圖片，從而節約了網絡帶寬和提高了初次加載的速度，具體實現的技術并不復雜，下面分別對其說明。
首先，在頁面中準備一個id為div1的div,在這個div中放一個ul,ul中準備了一些li,然而這些li都有一個data-src的屬性，準備著圖片的地址，具體結構如下：

圖片的動態加載就是通過讀取li元素，然后獲得li元素的data-src屬性的值賦予動態創建的圖片的src，從而實現了圖片的創建。

function setImg(index){
                var oDiv=document.getElementById("div1")
                var oUl=oDiv.children[0];
                var aLi=oUl.children;
                if (aLi[index].dataset) {
                    var src=aLi[index].dataset.src;
                } else{
                    var src=aLi[index].getAttribute("data-src");
                }
                var oImg=document.createElement("img");
                oImg.src=src;
                if (aLi[index].children.length==0) {
                    aLi[index].appendChild(oImg); 
                }
            }

那么怎么識別是否在可視區域呢？這里需要一個函數，能夠實現獲得當前元素距離網頁頂部的距離！

//獲得對象距離頁面頂端的距離  
function getH(obj) {  
    var h = 0;  
    while (obj) {  
        h += obj.offsetTop;  
        obj = obj.offsetParent;  
    }  
    return h;  
}

當網頁的滾動條滾動時要時時判斷當前li的位置！

        window.onscroll = function () {
            var oDiv = document.getElementById("div1");
            var oUl = oDiv.children[0];
            var aLi = oUl.children;

            for (var i = 0, l = aLi.length; i < l; i++) {
                var oLi = aLi[i];
                //檢查oLi是否在可視區域
                var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
                var h = getH(oLi);
                if (h < t) {
                    setTimeout("setImg(" + i + ")", 500);
                }
            }
        };

當頁面加載完成以后要主動運行一下window.onscroll，從而獲得當前可視范圍內的圖片

        window.onload = function () {
            window.onscroll();
        };

另外，像這樣的頁面，障眼法和美化都是必須的，比如給每個li一個loading的圖片作為背景，從而實現了當前圖片正在加載的效果，美化工作就是做好合理的布局。

        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 520px;
            margin: 30px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        li {
            width: 160px;
            height: 160px;
            float: left;
            list-style: none;
            margin: 5px;
            background: url(loading.gif) center center no-repeat;
            border: 1px dashed green;
        }
        img{
        width:100%
        }

GPU云服務器云服務器 js實現數據的懶加載圖片 js圖片懶加載懶加載懶加載異常

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86084.html

懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

appetizerio 2019-08-29 16:57 評論0 收藏0
懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

Shonim 2019-08-02 11:41 評論0 收藏0
懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

hedzr 2019-08-23 12:19 評論0 收藏0
函數節流和圖片懶加載

摘要：然而，如果前一個定時器尚未執行，其實就是替換為一個新的定時器，目的是只有在執行函數的請求停止了一段時間后才執行。首先清除之前設置的任何定時器，定時器是儲存在函數的屬性中的。導讀這篇文章中主要介紹一下函數節流，然后給了一個圖片懶加載的例子，說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高，卷上去的長度等。參考來源主要是《JavaScript高級程序設計》。函數節流瀏覽器的D...

smallStone 2019-08-01 17:40 評論0 收藏0