图片加载：

图片是需要消耗大量系统资源的，图片多，服务器的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），再去加载下一张。