一、引言：图片加载问题的普遍性与影响
做手机H5网页时，有些时候页面速度太快，图片却迟迟出不来，这种情况挺糟心的。虽然不怎么影响用，但对用户来说就是不爽。他们可能会因为这个急躁不安或者干脆走人。所以，我们得搞好图片加载，提高页面流畅度，这样才能给用户更好的体验！
二、图片预加载的概念与重要性
啥叫图片预加载？简单来说，就是在我们想看网页之前，先把网页里所有要展示的图片下载完。这样一来，当你真的开始浏览网页时，图片早就准备好了，马上就能出现，给人感觉非常迅速！我个人认为，这不仅仅是个技术问题，更是对大家的尊重和体贴关怀。因为有了预加载，你每次要浏览网页都会感受到最棒的视觉体验！
三、预加载组件的创建与应用
想让网页上出现的图片速度变快？来试试这个小技巧！先用JavaScript创建Image对象，给它指定好加载路径后，在页面还没完全显示之前就让它们提前开始加载。等到所有图片都加载完之后，再展示整个页面。这样一来，当你打开网页时，就能马上看到图片了，是不是很棒？
四、预加载进度的反馈与处理
以前我搞图片预加载的时候，就不知道咋才能准确地展示加载进度。本来想搞个已加载数据占总量的百分比，但浏览器不给力。后来换了个法子，就是看已经下好的文件数占总文件数的比例，这招简单又好用，让用户随时都能知道图片加载到哪儿了。
五、处理图片加载失败的情况
用着用着发现图片老加载不出，这可不行，太影响阅读体验了。所以给每张图设了个限制，超过时间还没加载完，就让网页先出主内容。这样一来，就算图片出错，对浏览网页的影响也不会太大！
(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;
})();
六、预加载效果的展示与优化
imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){
console.log(percentage)
});
我那演示工程里面用了超大图，但因为是本地的，加载速度快得看不出来预加载。所以，我就在每个进度节点前面加了点时间让它慢慢加载，这样大家打开网页就知道在加载什么了，也能体验到预加载的流畅感咯。
七、预加载技术的扩展应用
除了图片，我还想试试看预加载其他像音视频这类资源！它们的DOM对象跟Image类似，预加载肯定行得通。这样不仅让用户体验更棒，对于手机网页开发来说，也多了很多新花样。
八、与懒加载技术的对比思考
你听过预加载？今天咱来聊聊懒加载！全球都有懒加载插件可用，但其实学会怎么搞懂原理更有趣。懒加载能让初次访问网页速度变快，尤其是大图或内容多的情况。将来，我打算再研究下懒加载在手机上的表现如何。
总结：
我自己试过很多次，发现给图片提前加载真的能大大提高H5移动页的流畅度。这样网页就能秒开，用户看起来也更爽快。以后我还会继续研究预加载技术在别的地方有什么用，大家也可以来说说你们的想法和建议哈。那你觉得图片预加载好不好？赶紧来评论区聊聊！别忘了点个赞分享出去，让更多人加入我们这个有趣的话题讨论。
//模拟加载慢的效果
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]();
}
});
评论0