关于图片的预加载等

图片加载：

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