實現圖片的異步加載（轉載） 實現圖片的異步加載

實現圖片的異步加載

做者：Ziv小威
出處：http://imziv.com/
關於做者：專一於Java技術的程序員一枚，此外對JS開發保持着較高的興趣。愛好音樂，閱讀，FM等等。
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
若有問題，能夠郵件：wewoor@foxmail.com
微博：Ziv小威

圖片異步加載功能是如今web中很是常見的一個針對web作優化的方法。尤爲是在移動端，面對大量的圖片列表的時候，若是沒有作相應的優化，會直接致使頁面滑動和加載的卡頓，並且用戶會莫名的發現當前應用佔用的流量會很大，由於他可能都沒有瀏覽到不少圖片，而程序就自動加載了因此的圖片，對於一個流量吃緊的人來說，這個也是很討厭的。因此實現按瀏覽需求加載時十分有必要的。

其實實現圖片異步加載的核心思路十分簡單，就是經過判斷當圖片元素是否出如今視窗範圍內後，則去加載圖片資源，不然不加載。因此咱們須要首先解決判斷img元素是否處於視圖範圍內的這個核心問題。讓咱們看看下面的圖：

 

 

經過抓取img元素，js提供了相應的方法讓咱們能夠獲取到img元素距離視圖top，和left的距離，viewport的高度和寬度等數據。而後經過監聽窗口滾動事件，當頁面滾動的時候，咱們就去動態檢測img元素的top和left值，與視窗的高度和寬度做比較，從而判斷當前的img是否處於視窗範圍。計算以下：

處於垂直範圍： 圖片距離視窗頂部距離 > 0 && 圖片距離視窗頂部距離 <= 視窗高度 
處於水平範圍： 圖片距離視窗左邊距離 > 0 && 圖片距離視窗左邊距離 <= 視窗寬度

解決了這個判斷圖片在可視範圍內的核心問題後，那麼其餘的問題都是否簡單了。咱們看下詳細代碼：

獲取視窗的高度和寬度：

var _viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
    _viewPortWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

 

是否處於垂直範圍

function isOnVerticalViewPort(ele) {
    var rect = ele.getBoundingClientRect(); // 獲取距離視窗的位置信息
    return rect.top > 0 && rect.top <= _viewPortHeight;
};

 

是否處於水平範圍

function isOnHorizontalViewPort(ele) {
    var rect = ele.getBoundingClientRect();
    return rect.left > 0 && rect.left <= _viewPortWidth;
};

 

有了這核心代碼，咱們只須要在滾動事件觸發後，去動態的判斷img元素了, 判斷的示例代碼以下：

function load(images) {
    for (var i = 0; i < images.length; i++) {
        var img = images[i];
        if (isOnVerticalViewPort(img) && isOnHorizontalViewPort(img)) {
            var url = img.getAttribute('lz-src'); // 獲取圖片資源的地址
            img.setAttribute("src", url);
            img.isload = true; // 加載事後的圖片設置加載標記，以避免重複加載
        }
    }
}

 

在html頁面中的img元素的引用：

<img lz-src="http://s.cn.bing.net/az/hprichbg/rb/SkunkKit_ZH-CN10809503929_1920x1080.jpg"></img>

 

經過給img元素添加lz-src標記，告訴異步腳本，這個元素須要異步加載圖片。

監聽滾動事件

var images = document.querySelectorAll('img[' + lz-src + ']'); // 按標記獲取圖片元素
    window.addEventListener("scroll", function(e) {
        load(images);
    }, false);

 

總結

以上就是圖片異步加載的主要代碼了。固然裏面能夠進行跟多的性能優化，例如我這裏每次都須要從新遍歷圖片列表，只是經過單獨的加載標記來確認圖片是否加載過，咱們固然能夠用不一樣的數組列表分別裝載加載過和未加載的圖片元素，從而下降遍歷次數等等。另外也能夠給圖片添加過分的loading動畫等等，讓這個異步加載插件更完善。我這裏有個較爲完整的異步加載的代碼，有興趣的朋友能夠查看：https://github.com/wewoor/sloth

原文地址：http://imziv.com/blog/article/read.htm?id=75

做者：Ziv小威
出處：http://imziv.com/
關於做者：專一於Java技術的程序員一枚，此外對JS開發保持着較高的興趣。愛好音樂，閱讀，FM等等。
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
若有問題，能夠郵件：wewoor@foxmail.com
微博：Ziv小威