圖片懶加載及異常處理

andot 發布于2019-08-23 17:56 / 624人閱讀

摘要：設置防抖動，避免回調頻繁執行，影響性能二圖片加載錯誤處理有些時候，由于網絡請求或是資源問題，導致圖片資源請求失敗，這時圖片會展示為非常難看的效果破碎的圖片。這時可以通過監聽圖片的時間來處理。

在日常頁面開發中，常常會涉及到圖片的展示。有時候當圖片資源過多時，我們希望能將圖片延遲加載，同時當圖片加載失敗后，能用一張默認圖片去代替其進行展示。其效果如圖所示：

一、圖片懶加載

其實圖片懶加載的核心思想很簡單：

通過預先將圖片的src資源指向一張小圖片或空，并通過 data-src 來記錄其實際圖片地址。

通過延遲加載或監聽滾動事件（圖片出現在可視區域中），將 data-src 屬性值賦值給 src 實現圖片的懶加載。

setTimeout({
    $imgs.each(function () {
        var $img = $(this);
        $img.src = $img.attr("data-src");
    });  
}, 0);

// 設置 500ms 防抖動，避免回調頻繁執行，影響性能
$(window).on("scroll", _.debounce(function () {
    var $window = $(window); 
    var top = parseInt($window.height()) + parseInt($window.scrollTop());
    $imgs.each(function () {
        var $img = $(this);
        var oSrc = $img.attr("data-src");
        if (!oSrc) return;
        if ($img.offset().top < top) {
            $img.src = oSrc;
            $img.attr("data-src", "");
        }
}, 500));

二、圖片加載錯誤處理

有些時候，由于網絡請求或是資源問題，導致圖片資源請求失敗，這時圖片會展示為非常難看的效果（破碎的圖片）。這時可以通過監聽圖片的 onerror 時間來處理。

$img.onerror = function () {
    $img.src = "default.jpg";
}

為了避免默認圖片也加載失敗時，圖片資源無限執行的情況，可以利用 jQuery 的 one() api 接口綁定一個一次性的 onerror 事件。

$img.one("error", function () {
    $img.src = "default.jpg";
});

tip: 在加載圖片時，我們可以利用創建一個不在 渲染樹 中的 Img 元素來加載圖片資源。

var oSrc = $img.attr("data-src");
var img = document.createElement("img");
img.onload = function () {
    $img.src = oSrc;
};
img.onerror = function () {
    console.debug("圖片加載失敗:", img.src);
    // 此時 $img src 依然為默認圖，如果圖片是否替換判斷不為 data-src ，可不進行清空
    $img.attr("data-src", "");
};
img.src = oSrc;

三、利用 background-size 屬性代替 img 標簽

大多數的時候，圖片所處位置的寬高都是固定的。但是圖片實際的寬高都是未知的，圖片寬高的設置方式有：

直接將 img 的寬高設置為 img { width: 100%; height: 100%; }可能會出現圖片嚴重失真。

通過設置最大寬高的方式 img { max-width: 100%; max-height: 100%; } 會出現上下或左右的留白，同時當資源圖片寬高小于容器時，留白更多。

background-size: cover; 能夠對圖片最大程度的利用，不存在留白和圖片失真的問題。不過該方式會存在圖片資源的損失（圖片不能完全展示）。

.img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

四、利用 Vue 實現一個圖片處理指令

export default function (el, binding) {
    setTimeout(() => {
        const img = document.createElement("img");
        img.onload = function () {
            el.style.backgroundImage = `url(${binding.value})`;
        };
        img.onerror = function () {
            console.debug("圖片加載失敗:", img.src);
        };
        img.src = binding.value;
    }, 0);
};

完整示例代碼：





    
    
    圖片懶加載處理

五、圖片優化

如果是前端資源圖片的話，還可以做圖片做一些其他優化：

壓縮圖片，降低圖片大小（智圖：一個圖片優化平臺）

響應式請求圖片資源（高清屏請求 @2x 圖片，一般屏幕請求 @x 圖片，控制圖片尺寸，從而縮減圖片大小）

減少圖片 http 請求次數（雪碧圖）

利用字體庫代替圖標（canvas 、svg 繪圖替代圖標）

具體細節說明可以參考： web前端優化之圖片優化

云服務器 GPU云服務器懶加載異常 js圖片懶加載 js實現數據的懶加載圖片懶加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104398.html

Android優化總結

摘要：錯誤使用單利在開發中單例經常需要持有對象，如果持有的對象生命周期與單例生命周期更短時，或導致無法被釋放回收，則有可能造成內存泄漏。如果集合是類型的話，那內存泄漏情況就會更為嚴重。目錄介紹 1.OOM和崩潰優化 1.1 OOM優化 1.2 ANR優化 1.3 Crash優化 2.內存泄漏優化 2.0 動畫資源未釋放 2.1 錯誤使用單利 2.2 錯誤使用靜態變量 2.3 ...

sunsmell 2019-08-19 11:45 評論0 收藏0
ViewPager懶加載極致優化

摘要：最后，當一次更新添加和或移除完成之后將會調用來通知提交關聯和或取消關聯的操作。懶加載的實現弊端概念當需要時才加載，加載之后一直保持該對象。而且為了實現滑動效果，都是預加載左右兩側的頁面。預加載的預加載機制。目錄介紹 01.ViewPager簡單介紹 02.ViewPager弊端分析 03.ViewPager預加載 04.ViewPager部分源碼 05.懶加載出現問題 06.如何實...

gotham 2019-08-16 18:41 評論0 收藏0
“瀑布流式”圖片懶加載代碼解析及優化(二)

摘要：之前寫過一版圖片懶加載的文章，剛好周末在整理文件的時候，大概又看了一遍之前寫的代碼發現有很多可以優化的地方。這篇文章主要就是結合上篇瀑布流式圖片懶加載代碼示例再來看看圖片懶加載的一些知識。之前寫過一版圖片懶加載的文章，剛好周末在整理文件的時候，大概又看了一遍之前寫的代碼發現有很多可以優化的地方。這篇文章主要就是結合上篇《瀑布流式圖片懶加載代碼示例》再來看看圖片懶加載的一些知識。圖片...

appetizerio 2019-08-19 17:39 評論0 收藏0
函數節流和圖片懶加載

摘要：然而，如果前一個定時器尚未執行，其實就是替換為一個新的定時器，目的是只有在執行函數的請求停止了一段時間后才執行。首先清除之前設置的任何定時器，定時器是儲存在函數的屬性中的。導讀這篇文章中主要介紹一下函數節流，然后給了一個圖片懶加載的例子，說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高，卷上去的長度等。參考來源主要是《JavaScript高級程序設計》。函數節流瀏覽器的D...

smallStone 2019-08-01 17:40 評論0 收藏0
函數節流和圖片懶加載

摘要：然而，如果前一個定時器尚未執行，其實就是替換為一個新的定時器，目的是只有在執行函數的請求停止了一段時間后才執行。首先清除之前設置的任何定時器，定時器是儲存在函數的屬性中的。導讀這篇文章中主要介紹一下函數節流，然后給了一個圖片懶加載的例子，說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高，卷上去的長度等。參考來源主要是《JavaScript高級程序設計》。函數節流瀏覽器的D...

tomlingtm 2019-08-21 16:44 評論0 收藏0