今天就跟大家聊聊有关如何利用图片预加载组件提升html5移动页面的用户体验 ，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
10年积累的成都网站建设、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有福安免费网站建设让你可以放心的选择与我们合作。
在做h6移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载的处理，当用户打开页面的时候不立即显示第一屏，而是先显示资源加载效果，等到加载完毕，再来显示页面的主内容，这样就能解决那个问题。虽然这种加载效果占用了用户的浏览时间，但是我们可以把它做的好看有趣一点，所以也不会影响用户体验。
效果：
1. 实现思路
html里面的img标签和css中background-imag等都会触发浏览器去加载相关的图片，但是如果这个图片已经加载过了的话，浏览器就会直接使用这张已经加载好的图片，从而能够瞬间在页面中渲染出来。通过javascript，创建Image对象，然后把这些对象的src属性设置成要加载的图片地址也能触发浏览器加载图片，利用这一点就能实现图片预加载的功能：在页面里首先把那些用到了相关的图片的元素给藏掉，然后用js去加载图片，等到所有图片加载完毕再把藏掉的元素显示即可。不过这仅仅是一个基本的实现思路，要完成一个功能较健壮的预加载组件，还有以下三个问题：
1）进度问题
由于预加载的同时，还得做一个预加载的效果，这就需要把加载的进度实时通知到外部上下文才行。关于进度有两个实现方式，第一是已加载的数据大小/总的数据大小，第二是已加载的文件数/总的文件数，在浏览器里面，采用第一种方式是不现实的，根本没有原生的办法可以做到，所以只能采用第二种。
2）图片加载失败的问题
比如说有4张图片，已经加载了50%，在加载第三张的时候出错了，该不该将进度反馈成75%呢？答案是：应该。如果不这么处理的话，进度永远无法到100%，页面主内容就没机会显示了，虽然图片加载有失败的情况，但是跟加载器没有关系，也许图片本身就不存在呢？也就是说图片加载失败不应该影响加载器的功能。
3）图片加载超时的问题
图片不能加载太久，否则用户一直停留在加载效果上看不到主内容，用户的等待时间不可控制地延长，导致用户体验下降，这样就有悖加载器的初衷了。所以应该给每个图片设置一个加载的超时时间，如果在所有图片的超时时间之后，还没加载完，就应该主动放弃加载，通知外部上下文加载完毕，显示主内容。
综合以上这些需求，本文提供的实现是：
JavaScript Code复制内容到剪贴板
(function () {
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
/**
* @param imgList 要加载的图片地址列表，['aa/asd.png','aa/xxx.png']
* @param callback 每成功加载一个图片之后的回调，并传入“已加载的图片总数/要加载的图片总数”表示进度
* @param timeout 每个图片加载的超时时间，默认为5s
*/
var loader = function (imgList, callback, timeout) {
timeout = timeout || 5000;
imgList = isArray(imgList) && imgList || [];
callback = typeof(callback) === 'function' && callback;
var total = imgList.length,
loaded = 0,
imgages = [],
_on = function () {
loaded < total && (++loaded, callback && callback(loaded / total));
};
if (!total) {
return callback && callback(1);
}
for (var i = 0; i < total; i++) {
imgages[i] = new Image();
imgages[i].onload = imgages[i].onerror = _on;
imgages[i].src = imgList[i];
}
/**
* 如果timeout * total时间范围内，仍有图片未加载出来（判断条件是loaded < total），通知外部环境所有图片均已加载
* 目的是避免用户等待时间过长
*/
setTimeout(function () {
loaded < total && (loaded = total, callback && callback(loaded / total));
}, timeout * total);
};
"function" === typeof define && define.cmd ? define(function () {
return loader
}) : window.imgLoader = loader;
})();使用方式（对应代码中的test.html）：
XML/HTML Code复制内容到剪贴板
