我们在做页面的时候，从用户体验的角度出发，必定是但愿用户以最快的速度看到完整的页面信息，但在实际情况中经常会遇到些问题。

好比受网速影响，页面加载素材的时间对照长，页面会呈现短时间的错杂或者闪屏；

或者页面素材对照多、对照大，需要必然的加载时间，出格有时候的勾当页面，我们一般会把首屏做的更多多样化或者转达对照丰富的气氛的时候，我们的首屏素材上城市对照大，有时候也会给元素加上动画来转达信息，好比我之前做的WeGame新春勾当页就是这样的情况；

一般我们的措置惩罚惩罚方案是在页面素材加载完成之前显示一个有趣（不那么枯燥）的loading页，那么从重构的角度出发，我们这个素材加载状态该怎么共同loading页做措置惩罚惩罚呢，于是想到了可以监测一下浏览器加载图片的状态，并同时响应措置惩罚惩罚，好比加载完时隐藏loading页，每加载完一张图片就更新加载的百分比进度条等。

固然，值得注意的是，我们应该尽量的让用户期待loading页的时间变短，因为不要忘了，loading页也只是向后兼容措置惩罚惩罚的方案，它自己不是必需存在的。

方案分析

**场景：**除了首屏loading页加载必需的图片之外（无序加载），可能还有其他情景好比漫画网站，需要加载完前一张图片再加载下一张（有序加载）

道理：通过image 的 onload 事件判断浏览器加载图片的状态。

实现：一般我们会这样措置惩罚惩罚：

var img = new Image(); img.src = "logo.jpg"; img.onload = function () { alert("image is loaded"); };

但是这样措置惩罚惩罚有点问题，首先我们来认识两点：

1.一旦Image东西设置了src值，浏览器就会向处事器倡议请求，并缓存返回的图片。

2.浏览器请求是异步的。也就是说这段代码会遍历数组，每张图片几乎同时倡议请求，并不需要期待处事器返回功效后挨次倡议请求。就是说，js不会傻傻地在原地期待图片的加载，而是继续读代码，直到图片加载完成，触发onload事件，js才会回来执行onload里面的内容。

基于以上两点，如果我们先赋值了图片地点，浏览器已经加载完成的时候，onload绑定事件还没有赋值上去，这样就造成了必然的误差，所以改造如下：

var img = new Image(); img.onload = function () { alert("image is loaded"); }; img.src = "logo.jpg";

先绑定事件，在赋值图片地点，确保浏览器倡议请求前，图片已经绑定了onload事件。

Preload插件实现

GitHub地点：https://github.com/xiangshuo1992/preload

/** * 图片预加载插件Preload * * @param array imgs 预加载的图片地点数组列表 * @param Object options 配置参数 */ (function ($) { function Preload(imgs, options) { this.imgs = (typeof imgs === ‘string‘) ? [imgs] : imgs; this.options = { order: false, //默认值false,代表无序加载 minTimer: 0, //完成加载的最少时间，单位ms,默认为0，一般展示类型的loading动画会需要设置 each: null, //单张图片加载完执行的要领,一般是改削进度状态 end: null //所有图片加载完执行的要领，一般是隐藏loading页 }; this.timer = Date.now(); this.init(options); }; //插件初始化 Preload.prototype.init = function (options) { //配置参数合并 this.options = $.extend(this.options, options); if (this.options.order) { this.ordered(); //有序加载 } else { this.unordered(); //无序加载 } }; // 有序加载 Preload.prototype.ordered = function () { var that = this, imgs = this.imgs, len = imgs.length, count = 0, options = this.options; load(); function load() { var img = new Image(); $(img).on(‘load error‘, function () { options.each && options.each(count); if (count >= len-1) { //所有图片加载完毕,查抄是否满足最小loading时间 var timerCount = Date.now() - that.timer; if (timerCount < options.minTimer) { var timeout = options.minTimer - timerCount; setTimeout(function () { options.end && options.end(); }, timeout); }else{ options.end && options.end(); } } else { load(); } count++ }); // onload函数要写在转变src前,这样确保了onload函数必然会被挪用 img.src = imgs[count]; } }; // 无序加载 Preload.prototype.unordered = function () { var that = this, imgs = this.imgs, len = imgs.length, count = 0, options = this.options; for (var i = 0; i < len; i++) { var img = new Image(); $(img).on(‘load error‘, function () { options.each && options.each(count); if (count >= len-1) { //所有图片加载完毕,查抄是否满足最小loading时间 var timerCount = Date.now() - that.timer; if (timerCount < options.minTimer) { var timeout = options.minTimer - timerCount; setTimeout(function () { options.end && options.end(); }, timeout); }else{ options.end && options.end(); } } count++; }) img.src = imgs[i]; } }; //扩展到jQuery东西上 $.extend($,{ preload: function (imgs, options) { new Preload(imgs, options); } }); })(jQuery);