圖片的懶加載的兩種效果

這篇文章主要介紹了javascript實現圖片懶加載的方法及思路，有時我們需要用懶加載，也就是延遲加載圖片的方式，來提高網站的親和力,需要的朋友可以參考下

一、定義

　　圖片延遲加載也稱為懶加載，延遲加載圖片或符合某些條件時才加載某些圖片，通常用於圖片比較多的網頁。可以減少請求圖片數量或者延遲請求時間，優化網頁性能。

二、原理

　　將頁面中的img標簽src指向一張小圖片或者src為空，然后定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。當載入頁面時，先把可視區域內的img標簽的data-src屬性值負給src，然后監聽滾動事件，把用戶即將看到的圖片加載。這樣便實現了懶加載。

三、呈現形式

　　1、延時加載，使用setTimeout或setInterval進行加載延遲，如果用戶在加載前就離開，自然就不會進行加載。
　　2、條件加載，符合某些條件或者觸發了某些條件才開始異步加載。
　　3、可視區域加載，僅僅加載用戶可以看到的區域，這個主要監控滾動條來實現，一般距離用戶看到的底邊很近的時候開始加載，這樣能保證用戶下拉時圖片正好接上，不會有太長時間的停頓。

 四、基本步驟

　　1、網頁中的圖片都設為同一張圖片
　　2、給圖片增加data-src = "img/timg.jpg"的屬性，保存圖片的真實地址
　　3、當觸發某些條件時，自動改變該區域的圖片的src屬性為真實的地址 

 

第一種：JavaScript實現的方式

　　HTML：

        <div class="container">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
        </div>

　　JavaScript：

// 這是懶加載的方式

// 首先獲得頁面當中所有的圖片
var img = document.getElementsByTagName("img");

//存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
var n = 0;

//頁面載入完畢加載可是區域內的圖片
lazyload();

// 注冊滾動條滾動事件
window.onscroll = lazyload;

//監聽頁面滾動事件
function lazyload() {
    //可見區域高度
    var seeHeight = document.documentElement.clientHeight;

    /* 滾動條距離頂部高度
     * document.body.scrollTop：chrome
     * document.documentElement.scrollTop：FF
     * */
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    for(var i = n; i < img.length; i++) {
        /*
         * 當前圖片相對於頁面頂部的距離  <= 可視區域 + 滾動條距離距離頂部的距離
         * */
        if(img[i].offsetTop < seeHeight + scrollTop - 800) {
            // 將img[i]的src設置成img[i]的data-src
            if(img[i].getAttribute("src") == "") {
                img[i].src = img[i].getAttribute("data-src");
            }
            n = i + 1;
        }
    }
}

 

第二種：jQuery實現的方式

　　jQuery：

// 變量n儲存圖片加載的位置，防止每次都從第一張開始加載
var n = 0,
    img = $('img');

// 頁面刷新時首先調用一次加載函數
lazyload();

// 注冊滾動監聽函數
$(window).scroll(lazyload);

function lazyload() {
    for(var i = n; i < img.length; i++) {
        /*
         * offset() 方法返回或設置匹配元素相對於文檔的偏移（位置）。
         * offset().top 方法返回元素距離頁面頂部的距離
         * scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。
         * */
        if(img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop()) - 600) {
            // 如果每個img的src為空的話，給每個img的src賦值為data-src的值
            if(img.eq(i).attr("src") == "") {
                var src = img.eq(i).attr("data-src");
                img.eq(i).attr("src", src);
                n = i + 1;
            }
        }
    }
}