欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2014年12月22日 08:53:31   投稿：shichen2014  
這篇文章主要介紹了原生javaScript實(shí)現(xiàn)圖片延時加載的方法,無需通過載入jQuery腳本即可實(shí)現(xiàn)圖片的延時加載效果,是非常實(shí)用的技巧,需要的朋友可以參考下

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

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

圖片延時加載原理

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

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

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

復(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;  //防止瀏覽器一直加載圖片，這樣圖片加載成功后，滾動瀏覽器的時候就不會再加載圖片了；
}
var fnLoad = function(obj){
    var t = document.body.scrollTop || document.documentElement.scrollTop;
    if(t+h>obj.top+200&&obj.top>t){ //給個200為了提高讓用戶看到圖片加載狀態(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>

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

相關(guān)文章

  • 移動端js觸摸事件詳解

    移動端js觸摸事件詳解

    這篇文章主要為大家詳細(xì)介紹了移動端js觸摸事件,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • JavaScript表單即時驗(yàn)證 驗(yàn)證不成功不能提交

    JavaScript表單即時驗(yàn)證 驗(yàn)證不成功不能提交

    這篇文章主要為大家詳細(xì)介紹了JavaScript表單即時驗(yàn)證，驗(yàn)證不成功不能提交，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • 原生JavaScrpit中異步請求Ajax實(shí)現(xiàn)方法

    原生JavaScrpit中異步請求Ajax實(shí)現(xiàn)方法

    這篇文章主要介紹了原生JavaScrpit中異步請求Ajax實(shí)現(xiàn)方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2017-11-11
  • Javascript的異步函數(shù)和Promise對象你了解嗎

    Javascript的異步函數(shù)和Promise對象你了解嗎

    這篇文章主要為大家詳細(xì)介紹了Javascript異步函數(shù)和Promise對象，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-03-03
  • JavaScript實(shí)現(xiàn)網(wǎng)頁版五子棋游戲

    JavaScript實(shí)現(xiàn)網(wǎng)頁版五子棋游戲

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁版五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-07-07
  • 老生常談 js中this的指向

    老生常談 js中this的指向

    下面小編就為大家?guī)硪黄仙Ｕ?js中this的指向。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 定單管理上 JS表格排序

    定單管理上 JS表格排序

    定單管理上 JS表格排序...
    2006-10-10
  • JS復(fù)雜判斷的更優(yōu)雅寫法代碼詳解

    JS復(fù)雜判斷的更優(yōu)雅寫法代碼詳解

    我們編寫js代碼時經(jīng)常遇到復(fù)雜邏輯判的情況，通常大家可以用if/else或者switch來實(shí)現(xiàn)多個條件判斷，但這樣會有個問題，隨著邏輯復(fù)雜度的增加，代碼中的if/else/switch會變得越來越臃腫，越來越看不懂，那么如何更優(yōu)雅的寫判斷邏輯，本文帶你試一下
    2018-11-11
  • 一文教你如何優(yōu)雅的使用WebSocket

    一文教你如何優(yōu)雅的使用WebSocket

    WebSocket最大特點(diǎn)就是服務(wù)器可以主動向客戶端推送信息,客戶端也可以主動向服務(wù)器發(fā)送信息,是真正的雙向平等對話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • js父頁面與子頁面不同時顯示的方法

    js父頁面與子頁面不同時顯示的方法

    這篇文章主要介紹了js父頁面與子頁面不同時顯示的方法,打開一個頁面后,父頁面DISABLE,在子頁面關(guān)閉后,父頁面ENABLE,是比較實(shí)用的技巧,需要的朋友可以參考下
    2014-10-10

最新評論