圖片的懶加載的兩種效果

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

1、定義

　　圖片延遲加載也稱爲懶加載，延遲加載圖片或符合某些條件時才加載某些圖片，一般用於圖片比較多的網頁。能夠減小請求圖片數量或者延遲請求時間，優化網頁性能。

2、原理

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

3、呈現形式

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

 4、基本步驟

　　一、網頁中的圖片都設爲同一張圖片
　　二、給圖片增長data-src = "img/timg.jpg"的屬性，保存圖片的真實地址
　　三、當觸發某些條件時，自動改變該區域的圖片的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;
            }
        }
    }
}