Img load

時間 2019-11-19

標籤 img load 欄目 HTML 简体版

原文原文鏈接

懶加載（又稱爲延遲加載圖片）或符合某些條件時才加載某些圖片

懶加載的意義：主要目的是做爲服務器前段的優化，減小請求或延遲請求的次數。

呈現懶加載的三種形式：

①.純粹的延時加載，使用setTimeout或者setInterval進行加載延遲，若是用戶在加載前就離開了，那麼天然就不會進行加載。

②.第二種就是條件加載，符合某些條件，或者觸發了某些事件纔開始異步加載。

③.第三種就是可視區域加載，僅僅加載用戶能夠看到的區域，這個主要監控滾動條來實現，通常據用戶看到的底邊很近的時候開始加載，這樣能保證用戶下拉的時候圖片正好接上，不會有太長時間的停頓。

使用優勢分析

a. 提升網頁加載速度，直接影響收錄與排名--在蜘蛛抓去的時候，爬行網頁會很是快速，以致於頁面優化值獲得最大提高。

b. 減小請求，下降服務器壓力。--只有當用戶滾動到可視範圍內才加載圖片，下載次數減小

使用缺點分析

a. 圖片不會被收錄

蜘蛛會收錄圖片到，本身服務器的圖片庫中。但由於咱們的靜態頁面的圖片都指向一張，因此圖片不會被蜘蛛收錄。

b. 頁面又要引入一個 js

咱們開發者更但願簡單，而不是引入一堆東西，由於不多人去關注源碼，很怕會出問題

如何使用js懶加載圖片

懶加載圖片工具：使用jquery.lazyload.js的機制

http://www.appelsiini.net/projects/lazyload

基本步驟

1.網頁中的圖片，都設爲同一張圖片。

2.給圖片增長 data-original="img/example.jpg" 的屬性，保存這張圖片的真實地址。

3.當滾動條到達用戶可視區域後，插件自動改變該區域的圖片的src屬性爲緩存的地址。

4.瀏覽器加載可視區域圖。

注意：

1.增長 data-original="圖片真實地址"

2.頁面全部的img標籤的src屬性指向同一個圖片(圖片未加載時，顯示的一張臨時圖)

3.圖片必定要設置 width 與 height （有寬高，瀏覽器就能夠分配空間位置，不然就要等待獲取圖片寬高，或者之後重繪來再次排版。）

img標籤在使用的時候一下幾個事件很是的有用：
onError ：當圖片加載出現錯誤，會觸發常常在這裏事件裏頭寫入將圖片導向默認報錯圖片，以避免頁面上出現紅色的叉叉.
onLoad ：事件是當圖片加載完成以後觸發 .
onAbort ：圖片加載的時候，用戶經過點擊中止加載（瀏覽器上的紅色叉叉）時出發，一般在這裏觸發一個提示：「圖片正在加載」.

<img src="test.png" data-original="example.jpg" width="480" height="480">

以後能夠直接用插件處理$("img.lazy").lazyload(); 固然，也能夠本身進行DOM的書寫（也不難）

data-original這個通常設定圖像的真實地址。而src就導入一張全部圖片站位的圖片地址，這個站位圖片，再最開始就已經下載好了。

<body>
<button>加載圖片</button>
<img src="test.png" alt="測試" data-original = "test2.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];   

//延遲加載，給圖片加了 載入事件
function aftLoadImg(obj, url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}
 
oBtn.onclick = function(){
    oImg.src = "test2.png";　　　　// 若是圖片不是很大，就直接改一下src就能夠了，

    for (var pro in oImg.dataset) {　　//這裏證實，dataset裏面有一個orignial屬性，是test2.png。
        document.write(pro + " " +oImg.dataset[pro] + "</br>");
        //會打印出  original test2.png
    }
　　
　　 //若是以爲圖片有點大，就直接加載一個事件，上面已經說明過，圖像是有onload事件的，等加載完畢後在顯示。
    if(oImg.dataset){　　　　　　　　//是否能夠獲取dataset屬性。
        aftLoadImg(oImg, oImg.dataset.original);    
    }
    else{
        aftLoadImg(oImg,oImg.getAttribute("data-original"));
    }
}
</script>    
</body>

使用jQuery插件

a.懶加載圖片是基於jquery.js的，因此：

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>

b. 須要懶加載的圖片，　　①.增長 data-original="圖片真實地址"javascript

②.頁面全部的img標籤的src屬性指向同一個圖片(圖片未加載時，顯示的一張臨時圖)css

③.圖片必定要設置 width 與 height html

注意：這點你可能沒辦法接受，由於須要改變你的htmljava

<img src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

c.把須要懶加載的圖片，選中，而後調用插件函數就ok了！

 $("img.lazy").lazyload();

另外一種方式，經過判斷滾動條的位置，來選擇加載的時機

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
    width: 500px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

img{
    border: none;
    vertical-align: middle;
}
.in{
    border: 1px solid black;
    margin: 10px;
    text-align: center;
    height: 400px;
    width: 400px;
    float: left;
}
.in img{
    height: 400px;
    width: 400px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/4.png"></li>    
</ul>

<script>

var aImages = document.images;
alert(aImages.length);
loadImg(aImages);

window.onscroll = function(){
    loadImg(aImages);
};


function loadImg(arr) {
    for ( var i = 0,len = arr.length; i < len; i++) {
        //  分別表明該元素上、左、右、下四條邊界相對於瀏覽器窗口左上角（注意，不是文檔區域的左上角）的偏移像素值
        if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
            arr[i].isLoad = true;
            arr[i].style.cssText = "transition: ''; opacity: 0;";
            if (arr[i].dataset) {
                aftLoadImg(arr[i], arr[i].dataset.original);    
            } else {
                aftLoadImg(arr[i], arr[i].getAttribute("data-original"));
            }

            (function(i){
                setTimeout(function(){
                    arr[i].style.cssText = "transition: 1s; opacity: 1;"    //transition CSS3漸變
                }, 16);
            })(i);
        }
    }
}

function aftLoadImg(obj, url){
    var oImg = new Image();
    oImg.onload = function() {
        obj.src = oImg.src;
    }
    oImg.src = url;
}

</script>    
</body>
</html>

//得到對象距離頁面頂端的距離

function getH(obj) {  
    var h = 0;  
    while (obj) {  
        h += obj.offsetTop;  
        obj = obj.offsetParent;  
    }  
    return h;  
}

//當網頁的滾動條滾動時要時時判斷當前li的位置！jquery

        window.onscroll = function () {
            var oDiv = document.getElementById('listID');
            var oUl = oDiv.children[0];
            var aLi = oUl.children;

            for (var i = 0, l = aLi.length; i < l; i++) {
                var oLi = aLi[i];
                //檢查oLi是否在可視區域
                var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
                var h = getH(oLi);
                if (h < t) {
                    setTimeout("setImg(" + i + ")", 500);
                }
            }
        };

//當頁面加載完成之後要主動運行一下window.onscroll，從而得到當前可視範圍內的圖片。瀏覽器

window.onload = function () {  
    window.onscroll();  
};

參考：

http://blog.csdn.net/pvfhv/article/details/6176099

http://blog.163.com/hongshaoguoguo@126/blog/static/180469812014114102332873/

相關標籤/搜索

img

load

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。