利用简洁的图片预加载组件提升html5移动页面的用户体验

在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载的处理，当用户打开页面的时候不立即显示第一屏，而是先显示资源加载效果，等到加载完毕，再来显示页面的主内容，这样就能解决那个问题。虽然这种加载效果占用了用户的浏览时间，但是我们可以把它做的好看有趣一点，所以也不会影响用户体验。本文实践了这种想法，提供一个非常简洁的图片预加载组件，实现简单，功能不弱，在做移动页面的时候应该对你有参考价值。

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;    
})(); 

XML/HTML Code 复制内容到剪贴板

<script src="js/imgLoader.js"></script>    
<script>    
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function(percentage){    
console.log(percentage)    
});    
</script> 

XML/HTML Code 复制内容到剪贴板

<script src="js/zepto.js"></script>    
<script src="js/transition.js"></script>    
<script src="js/hammer.js"></script>    
<script src="js/imgLoader.js"></script>    
<script src="js/swipe.js"></script> 

XML/HTML Code 复制内容到剪贴板

//模拟加载慢的效果    
var callbacks = [];    
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
var i = callbacks.length;    
callbacks.push(function(){    
setTimeout(function(){    
var percentT = percentage * 100;    
$('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
$('#loader__progress')[0].style.width = percentT + '%';    
if (percentage == 1) {    
setTimeout(function(){    
$('#loader').remove();    
Swipe.init();    
}, 600);    
}    
callbacks[i + 1] && callbacks[i + 1]();    
},600);    
});    
if(percentage == 1) {    
callbacks[0]();    
}    
}); 

XML/HTML Code 复制内容到剪贴板

imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
var percentT = percentage * 100;    
$('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
$('#loader__progress')[0].style.width = percentT + '%';    
if (percentage == 1) {    
$('#loader').remove();    
Swipe.init();    
}    
}); 

3. 注意事项
预加载是一种比较常见的实现效果，但是在使用的时候，有些问题需要注意：
1）什么时候用
页面大的时候用，一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候，可以考虑使用。
2）尽量使用sprite图片
3）加载效果实现的时候，尽量不用图片，即使要用也应该用很小的图片，否则加载效果卡在那就没有意义了。
4. 总结
本文主要介绍了一个简单的图片预加载器，可应用于h5移动页面的开发当中，在它的思路之下，如果有必要的话，还可以对它进行一些改造，用它来加载其它类型的资源，比如音频或者视频文件，毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的，还有一种图片懒加载的技术，现在网上已经有比较好用的jquery插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究。同时感谢大家一直以来对PHP中文网的支持！

更多利用简洁的图片预加载组件提升html5移动页面的用户体验 相关文章请关注PHP中文网！

查看更多关于利用简洁的图片预加载组件提升html5移动页面的用户体验的详细内容...