原生javaScript實作圖片延時載入的方法_javascript技巧

本文實例講述了原生javaScript實作圖片延時載入的方法。圖片延時加載其實是有jquery插件了並且加載方法非常的簡單並且合理了，但有朋友覺得加載jquery插件包太大了，於時自己寫了一個，給各位分享一下。

首先，圖片延時加載可以節省我們頻寬，獲取到更好的用戶體驗，尤其對於圖片多的站點，這一點顯得至關重要，下面就跟大家探討一下圖片延時加載原理和實現代碼。

圖片延遲載入原理

圖片延時載入原理是在html裡面的圖片src填的並不是真正的圖片地址，而是以一種自訂屬性把圖片地址賦給img標籤，如：src=”img/loading.gif ” data-url=”img/1.jpg”，然後透過js判斷瀏覽器滾動條事件，達到某處的時候把自訂屬性裡面的圖片真實地址賦給當前img標籤的src，從而實現圖片動態的顯示。在真正的專案中，這些圖片的地址可以透過ajax傳遞過來，賦給img的自訂屬性。

原生JS實作圖片延遲載入實例：

文字內容看起來終究有些枯燥，我寫了一個簡單的demo，現在把全部程式碼貼出來，需要的朋友可以直接複製過去，看一下程式碼就懂了。

複製程式碼 程式碼如下:

    img{顯示:塊;寬度:350px;高度:245px;背景:url(img/loading.gif) 中心中心不重複}
風格>
頭>

var obj=document.getElementById("div").getElementsByTagName("img"),
h=window.innerHeight || document.documentElement.clientHeight;
for(var i=0;i     obj[i].url=obj[i].getAttribute("data-url");
    obj[i].top=obj[i].offsetTop;
    obj[i].flag=true;  //防止瀏覽器一直載入圖片，這樣圖片載入成功後，滾動瀏覽器的時候就不會再載入圖片了；
}
var fnLoad = 函數(obj){
    var t = document.body.scrollTop ||文檔.documentElement.scrollTop;
    if(th>obj.top 200&&obj.top>t){ //給個200為了提高讓使用者看到圖片載入狀態，更友善
       setTimeout(function(){
         obj.src=obj.url;
         obj.flag=false;
       },500)
    }
}
window.onscroll = window.onload=function(){
    for(var i=0;i         if(obj[i].flag){
            fnLoad(obj[i]);
        }
    }
}
腳本>
身體>

希望本文對大家介紹的javascript程式設計有幫助。