前端專案中的圖片載入優化方法

這次帶給大家前端專案中的圖片載入優化方法，前端專案中圖片載入優化方法的注意事項有哪些，以下就是實戰案例，一起來看一下。

圖片是介面顯示效果很重要的組成部分，圖片載入關係到使用者體驗、應用程式效能，優化圖片載入的常用策略為：預先載入和懶載入。

圖片預先載入可以提高使用者體驗，對於圖片圖庫和圖片佔比很大的網頁內容尤其重要

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 == &#39;loading.gif&#39;? img.getAttribute(&#39;data-src&#39;):img.src;
            n = i + 1;
        }
    }
}window.onscroll = lazyload;

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

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

關於JS繼承的詳解

#JS的函數節流使用

用JS程式碼做出彈幕效果

#

以上是前端專案中的圖片載入優化方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！