原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法

更新時(shí)間：2014年12月22日 08:53:31 投稿：shichen2014

這篇文章主要介紹了原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法,無(wú)需通過(guò)載入jQuery腳本即可實(shí)現(xiàn)圖片的延時(shí)加載效果,是非常實(shí)用的技巧,需要的朋友可以參考下

本文實(shí)例講述了原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法。圖片延時(shí)加載其實(shí)是有jquery插件了并且加載方法非常的簡(jiǎn)單并且合理了，但有朋友覺(jué)得加載jquery插件包太大了，于時(shí)自己寫(xiě)了一個(gè)，給各位分享一下。

首先，圖片延時(shí)加載可以節(jié)省我們帶寬，獲取到更好的用戶(hù)體驗(yàn)，尤其對(duì)于圖片多的站點(diǎn)，這一點(diǎn)顯得至關(guān)重要，下面就跟大家探討一下圖片延時(shí)加載原理和實(shí)現(xiàn)代碼。

圖片延時(shí)加載原理

圖片延時(shí)加載原理是在html里面的圖片src填的并不是真正的圖片地址，而是以一種自定義屬性把圖片地址賦給img標(biāo)簽，如：src=”img/loading.gif” data-url=”img/1.jpg”，然后通過(guò)js判斷瀏覽器滾動(dòng)條事件，達(dá)到某處的時(shí)候把自定義屬性里面的圖片真實(shí)地址賦給當(dāng)前img標(biāo)簽的src，從而實(shí)現(xiàn)圖片動(dòng)態(tài)的顯示。在真正的項(xiàng)目中，這些圖片的地址可以通過(guò)ajax傳遞過(guò)來(lái)，賦給img的自定義屬性。

原生JS實(shí)現(xiàn)圖片延時(shí)加載實(shí)例：

文字內(nèi)容看起來(lái)終究有些枯燥，我寫(xiě)了一個(gè)簡(jiǎn)單的demo，現(xiàn)在把全部代碼貼出來(lái)，需要的朋友可以直接復(fù)制過(guò)去，看一下代碼就明白了。

復(fù)制代碼代碼如下:

<!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;  //防止瀏覽器一直加載圖片，這樣圖片加載成功后，滾動(dòng)瀏覽器的時(shí)候就不會(huì)再加載圖片了；

}

var fnLoad = function(obj){

    var t = document.body.scrollTop || document.documentElement.scrollTop; 

    if(t+h>obj.top+200&&obj.top>t){ //給個(gè)200為了提高讓用戶(hù)看到圖片加載狀態(tài)，更加友好

       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>