成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

圖片懶加載及異常處理

andot / 655人閱讀

摘要：設(shè)置防抖動(dòng)，避免回調(diào)頻繁執(zhí)行，影響性能二圖片加載錯(cuò)誤處理有些時(shí)候，由于網(wǎng)絡(luò)請求或是資源問題，導(dǎo)致圖片資源請求失敗，這時(shí)圖片會(huì)展示為非常難看的效果破碎的圖片。這時(shí)可以通過監(jiān)聽圖片的時(shí)間來處理。

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

一、圖片懶加載

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

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

通過延遲加載或監(jiān)聽滾動(dòng)事件（圖片出現(xiàn)在可視區(qū)域中）， 將 data-src 屬性值賦值給 src 實(shí)現(xiàn)圖片的懶加載。

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

// 設(shè)置 500ms 防抖動(dòng)，避免回調(diào)頻繁執(zhí)行，影響性能
$(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));
二、圖片加載錯(cuò)誤處理

有些時(shí)候，由于網(wǎng)絡(luò)請求或是資源問題，導(dǎo)致圖片資源請求失敗，這時(shí)圖片會(huì)展示為非常難看的效果（破碎的圖片）。這時(shí)可以通過監(jiān)聽圖片的 onerror 時(shí)間來處理。

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

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

$img.one("error", function () {
    $img.src = "default.jpg";
});
tip: 在加載圖片時(shí)，我們可以利用創(chuàng)建一個(gè)不在 渲染樹 中的 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);
    // 此時(shí) $img src 依然為默認(rèn)圖，如果圖片是否替換判斷不為 data-src ，可不進(jìn)行清空
    $img.attr("data-src", "");
};
img.src = oSrc;
三、利用 background-size 屬性代替 img 標(biāo)簽

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

直接將 img 的寬高設(shè)置為 img { width: 100%; height: 100%; }可能會(huì)出現(xiàn)圖片嚴(yán)重失真。

通過設(shè)置最大寬高的方式 img { max-width: 100%; max-height: 100%; } 會(huì)出現(xiàn)上下或左右的留白，同時(shí)當(dāng)資源圖片寬高小于容器時(shí)，留白更多。

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

.img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
四、利用 Vue 實(shí)現(xiàn)一個(gè)圖片處理指令 
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);
};

完整示例代碼：





    
    
    圖片懶加載處理
五、圖片優(yōu)化

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

壓縮圖片，降低圖片大小 （智圖：一個(gè)圖片優(yōu)化平臺(tái)）

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

減少圖片 http 請求次數(shù)（雪碧圖）

利用字體庫代替圖標(biāo) （canvas 、svg 繪圖替代圖標(biāo)）

具體細(xì)節(jié)說明可以參考： web前端優(yōu)化之圖片優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104398.html

相關(guān)文章

  • Android優(yōu)化總結(jié)

    摘要：錯(cuò)誤使用單利在開發(fā)中單例經(jīng)常需要持有對象，如果持有的對象生命周期與單例生命周期更短時(shí)，或?qū)е聼o法被釋放回收，則有可能造成內(nèi)存泄漏。如果集合是類型的話，那內(nèi)存泄漏情況就會(huì)更為嚴(yán)重。 目錄介紹 1.OOM和崩潰優(yōu)化 1.1 OOM優(yōu)化 1.2 ANR優(yōu)化 1.3 Crash優(yōu)化 2.內(nèi)存泄漏優(yōu)化 2.0 動(dòng)畫資源未釋放 2.1 錯(cuò)誤使用單利 2.2 錯(cuò)誤使用靜態(tài)變量 2.3 ...

    sunsmell 評論0 收藏0

  • ViewPager懶加載極致優(yōu)化

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

    gotham 評論0 收藏0

  • “瀑布流式”圖片懶加載代碼解析及優(yōu)化(二)

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

    appetizerio 評論0 收藏0

  • 函數(shù)節(jié)流和圖片懶加載

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

    smallStone 評論0 收藏0

  • 函數(shù)節(jié)流和圖片懶加載

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

    tomlingtm 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<