在做h5移動頁面，相信大家一定碰到過頁面已經打開，但是裡面的圖片還未加載出來的情況，這種問題雖然不影響頁面的功能，但是不利於用戶體驗。拋開網速的原因，解決這個問題有多方面的思路：最基本的，要從http請求合併，緩存管理，圖片壓縮等方面做性能優化；另外就是可以對頁面裡用到的所有圖片做預載入的處理，當使用者開啟頁面的時候不立即顯示第一屏，而是先顯示資源載入效果，等到載入完畢，再來顯示頁面的主內容，這樣就能解決那個問題。雖然這種載入效果佔據了使用者的瀏覽時間，但是我們可以把它做的好看有趣一點，所以也不會影響使用者體驗。本文實踐了這種想法，提供一個非常簡潔的圖片預加載組件，實現簡單，功能不弱，在做移動頁面的時候應該對你有參考價值。
效果：
1. 實現對
1. 實現圖片
已經載入過了的話，瀏覽器就會直接使用這張已經載入好的圖片，從而能夠瞬間在頁面中渲染出來。透過javascript，創建Image對象，然後把這些對象的src屬性設置成要加載的圖片地址也能觸發瀏覽器加載圖片，利用這一點就能實現圖片預加載的功能：在頁面里首先把那些用到了相關的圖片的元素給藏掉，然後用js去載入圖片，等到所有圖片載入完畢再把藏掉的元素顯示即可。不過這只是一個基本的實現思路，要完成一個功能較健壯的預加載組件，還有以下三個問題：
1）進度問題
由於預加載的同時，還得做一個預加載的效果，這就需要把載入的進度即時通知到外部上下文才行。關於進度有兩個實作方式，第一是已載入的資料大小/總的資料大小，第二是已載入的檔案數/總的檔案數，在瀏覽器裡面，採用第一種方式是不切實際的，根本沒有原生的辦法可以做到，所以只能採用第二種。
2）圖片載入失敗的問題
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;
})();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();
}
});3. 注意事项
预加载是一种比较常见的实现效果，但是在使用的时候，有些问题需要注意：
1）什么时候用
页面大的时候用，一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候，可以考虑使用。
2）尽量使用sprite图片
3）加载效果实现的时候，尽量不用图片，即使要用也应该用很小的图片，否则加载效果卡在那就没有意义了。
4. 总结
本文主要介绍了一个简单的图片预加载器，可应用于h5移动页面的开发当中，在它的思路之下，如果有必要的话，还可以对它进行一些改造，用它来加载其它类型的资源，比如音频或者视频文件，毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的，还有一种图片懒加载的技术，现在网上已经有比较好用的jquery插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究。同时感谢大家一直以来对PHP中文网的支持！
更多利用简洁的图片预加载组件提升html5移动页面的用户体验 相关文章请关注PHP中文网！
