前端圖片加載優化

圖片是界面顯示效果很重要的組成部分，圖片加載關係到用戶體驗、應用性能，優化圖片加載的常用策略爲：預加載和懶加載。


原文鏈接

預加載

圖片預加載可以提高用戶體驗，對於圖片畫廊和圖片佔比很大的網頁內容尤其重要

css預加載

利用css的background屬性可以預先加載圖片，但不顯示在屏幕位置內，使用這些圖片時路徑一致的話，瀏覽器會優先加載緩存內的圖片進行顯示，這樣就達到了預加載的目的
#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}

但是這種方式會在剛開始頁面加載時影響其他內容顯示，可以添加一些js

window.onload = function () {
    let preload = document.createElement('div');
    preload.id = 'preload';
    document.body.appendChild(preload);
}

純js預加載

利用js實例化圖片對象，再賦值應用地址，這樣可以實現批量圖片預加載

window.onload = function () {
    let images = [
        'http://example.com/image1.png',
        'http://example.com/image2.png',
        'http://example.com/image3.png',
    ];

    images.forEach((src) => {
        preload(src);
    })
}

let preload = src => {
    let img = new Image();
    img.src = src;
}    

懶加載

圖片懶加載對於服務器可以起到緩解壓力的作用。

之前在js設計模式-代理模式中有通過虛擬代理方式實現圖片懶加載的方法

let imageEle = (function(){
    let node = document.createElement('img');
    document.body.appendChild(node);
    return {
        setSrc:function(src){
            node.src = src;
        }
    }
})();

//代理對象
let proxy = (function(){
    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };
    return {
        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();

proxy.setSrc('example.png');    

對於一些內容很長頁面，我們希望當用戶瀏覽到相應區域時再加載圖片，常用的解決方法是在img元素上使用data-src屬性替換src，判斷img元素在用戶可視區域時動態賦值src屬性顯示相應圖片。

如果是圖片牆形式頁面，爲避免開始加載全部圖片需要給圖片設置默認高度

.img{
    min-height: 400px;
}

設置滾動事件

let imgs = document.getElementsByTagName("img");
let n = 0; //存儲加載圖片索引
let lazyload= ()=> {
    let cHeight = document.documentElement.clientHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度
    for (let i = n,l = imgs.length; i < l; i++) {
        let img = imgs[i];
        if (img.offsetTop < cHeight + scrollTop) {
            img.src = img.src == 'loading.gif'? img.getAttribute('data-src'):img.src;
            n = i + 1;
        }
    }
}
window.onscroll = lazyload;

滾動事件可以節流函數再進行優化

正確使用圖片加載可以提高用戶體驗，保證頁面的展示效果，同時又可以在一定程度上緩解服務器的壓力，算是前端優化中經常涉及到的部分，瞭解其中的解決方法和策略可以幫助我們做出更好的產品。