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

"function" === typeof define && define.cmd ? define(function () {    

return loader    

}) : window.imgLoader = loader;    

})();   

使用方式（对应代码中的test.html）：

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>   

运行结果：

2. demo说明
本文开篇给出的效果，对应的页面是index.html，关于这个效果还有两个问题需要说明：
1）它用了之前这篇博客Hammer.js+轮播原理实现简洁的滑屏功能介绍的滑屏思路，并把它的一些逻辑包装在了swipe.js，对外提供了一个全局变量Swipe，这个模块有一个init的方法，以便外部通过调用Swipe.init()就能初始化滑屏相关的功能，原来没有提供这个init方法，在js加载完毕就会初始化滑屏功能，有了这个init方法就可以把滑屏的逻辑延迟到加载完毕的时候去初始化。index.html一共引用了5个js：

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>   

其中imgLoader.js就是前面介绍图片加载器的实现，前三个js都是为最后一个swipe.js服务的，感兴趣的可以继续我的博客利用轮播原理结合hammer.js实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理解本文的内容~
2）虽然我在demo中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个loading效果，实现方式是：

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

}    

});   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!