圖片延時載入可以節省我們頻寬，擷取到更好的使用者體驗，尤其對於圖片多的網站，這一點顯得至關重要，今天零度跟大家探討一下圖片延時載入原理和實現代碼。
圖片延時載入原理
圖片延時載入原理是在html裡面的圖片src填的並不是真正的圖片地址，而是以一種自訂屬性把圖片地址賦給img標籤，如：src=”img/loading.gif” data-url=”img/1.jpg”，然後通過js判斷瀏覽器捲軸事件，達到某處的時候把自訂屬性裡面的圖片真真實位址賦給當前img標籤的src，從而實現圖片動態顯示。在真正的項目中，這些圖片的地址可以通過ajax傳遞過來，賦給img的自訂屬性。
原生JS實現圖片延時載入執行個體：
文字內容看起來終究有些枯燥，我寫了一個簡單的demo，現在把全部代碼貼出來，需要的朋友可以直接複製過去，看一下代碼就明白了。
| 代碼如下 |
複製代碼 |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片消極式載入</title>
<style>
img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}
</style>
</head>
<body>
<div id="div">
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
</div>
<script type="text/javascript">
var obj=document.getElementById("div").getElementsByTagName("img"),
h=window.innerHeight || document.documentElement.clientHeight;
for(var i=0;i<obj.length;i++){
obj[i].url=obj[i].getAttribute("data-url");
obj[i].top=obj[i].offsetTop;
obj[i].flag=true; //防止瀏覽器一直載入圖片，這樣圖片載入成功後，滾動瀏覽器的時候就不會再載入圖片了；
}
var fnLoad = function(obj){
var t = document.body.scrollTop || document.documentElement.scrollTop;
if(t+h>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<obj.length;i++){
if(obj[i].flag){
fnLoad(obj[i]);
}
}
}
</script>
</body>
</html> |
