图片加载:
图片是需要消耗大量系统资源的,图片多,服务器的I/O负载就大;很多时候图片格式等都不是我们能够决定的。
一、CDN托管
第一首选,嗯,省事。
二、图片压缩
5M以上大小的图片,加载时间略长,可改为渐进式图片jpeg(逐步清晰),或先加载一张压缩后的图片,异步加载压缩前的图片进行替换。
三、BASE64
适合小图片,大图片会增大css体积,不利于本地缓存。
可以使用canvas来渲染base64格式的图片,css、svg、canvas或iconfont等。
四、懒加载
按需加载,先加载部分图片,当有需求时再加载其余的图片。
五、预加载
也可以进入页面前就加载图片,将其存在内存中,进入页面时图片就已经准备好了,但未进入页面时强刷会造成内存被清空。对象版预加载:
export default (function(){
/*
* imgSrcList: 要加载的图片地址数组
* callBack: 加载完成时的回调
* 首先创建一个图片对象,添加监听,再让其开始加载,单张图片加载完成时,将其存放在一个数组中,
* 循环结束时删除监听,全部图片加载完成,通过回调返回预加载后的图片。
*/
return {
loadImage: function(imgSrcList, callBack) {
var img = new Image();
//为了不改变this指向,loadHandler中this仍然是对象本身
img.handler = e => { this.loadHandler(e)};
img.imgSrcList = imgSrcList;
img.list = [];
img.n = 0;
img.callBack = callBack;
img.addEventListener("load", img.handler);
img.src = imgSrcList[img.n];
},
loadHandler: function(e) {
var img = e.currentTarget;
//复制节点,下面操作不会影响到复制后的节点
img.list.push(img.cloneNode(false));
img.n++;
if (img.n > img.imgSrcList.length - 1) {
img.removeEventListener("load", this.loadHandler);
img.callBack(img.list);
return;
}
img.src = img.imgSrcList[img.n];
}
}
})();
始终操作的都是img对象,img相当于一个膜具,图片加载好了就把它带走(cloneNode),再去加载下一张。