圖片是界面顯示效果很重要的組成部分奕扣，圖片加載關(guān)系到用戶體驗尝抖、應(yīng)用性能，優(yōu)化圖片加載的常用策略為：預(yù)加載和懶加載练慕。
原文鏈接
預(yù)加載
圖片預(yù)加載可以提高用戶體驗贴浙，對于圖片畫廊和圖片占比很大的網(wǎng)頁內(nèi)容尤其重要
css預(yù)加載
利用css的background屬性可以預(yù)先加載圖片，但不顯示在屏幕位置內(nèi)铛铁，使用這些圖片時路徑一致的話隔显，瀏覽器會優(yōu)先加載緩存內(nèi)的圖片進行顯示，這樣就達到了預(yù)加載的目的
#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}
但是這種方式會在剛開始頁面加載時影響其他內(nèi)容顯示饵逐，可以添加一些js
window.onload = function () {
let preload = document.createElement('div');
preload.id = 'preload';
document.body.appendChild(preload);
}
純js預(yù)加載
利用js實例化圖片對象括眠，再賦值應(yīng)用地址，這樣可以實現(xiàn)批量圖片預(yù)加載
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;
}
懶加載
圖片懶加載對于服務(wù)器可以起到緩解壓力的作用倍权。
之前在js設(shè)計模式-代理模式中有通過虛擬代理方式實現(xiàn)圖片懶加載的方法
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');
對于一些內(nèi)容很長頁面掷豺，我們希望當用戶瀏覽到相應(yīng)區(qū)域時再加載圖片捞烟，常用的解決方法是在img元素上使用data-src屬性替換src，判斷img元素在用戶可視區(qū)域時動態(tài)賦值src屬性顯示相應(yīng)圖片当船。
如果是圖片墻形式頁面题画，為避免開始加載全部圖片需要給圖片設(shè)置默認高度
.img{
min-height: 400px;
}
設(shè)置滾動事件
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;
滾動事件可以節(jié)流函數(shù)再進行優(yōu)化
正確使用圖片加載可以提高用戶體驗靠汁，保證頁面的展示效果棚辽，同時又可以在一定程度上緩解服務(wù)器的壓力，算是前端優(yōu)化中經(jīng)常涉及到的部分集惋，了解其中的解決方法和策略可以幫助我們做出更好的產(chǎn)品壹置。
