DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 原生javaScript實現圖片延時加載的方法教程
原生javaScript實現圖片延時加載的方法教程
編輯:關於JavaScript     

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

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

圖片延時加載原理

圖片延時加載原理是在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>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved