今天就跟大家聊聊有关如何利用图片预加载组件提升html5移动页面的用户体验,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
在做代替移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验。抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合,并缓存管理,图片压缩等方面做性能优化;另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题。虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影响用户体验。
效果:
(function (), {,,,
function isArray (obj), {,,,
return Object.prototype.toString.call (obj),===, & # 39; [object 数组]& # 39;,,,,,
},,,,/* *,,,
*,@param imgList 要加载的图片地址列表,(& # 39;aa/asd.png& # 39;, & # 39; aa/xxx.png& # 39;),,,
*,@param callback 每成功加载一个图片之后的回调,并传入”已加载的图片总数/要加载的图片总数”表示进度,,,
*,@param timeout 每个图片加载的超时时间,默认为5 s ,,
*/,,,,
var loader =, function (imgList,,回调,超时),{,,,
时间=timeout timeout | |, 5000,,,,,
时间=imgList isArray (imgList),,,, imgList | |, [];,,,,
时间=callback typeof(回调),===,& # 39;函数# 39;,,,,回调,,,,,
var total =, imgList.length,,,,,
时间=loaded 0,,,,,
时间=imgages [],,,,,
时间=_on function (), {,,,
loaded & lt;, total ,,,(+ +加载,,callback ,,,回调(时间/loaded 总)),,,,,
},,,,,
if (!), {,,,
return callback ,,,回调(1),,,,,
},,,,
for (var 小姐:=,0;,小姐:& lt;,总;,我+ +),{,,,
imgages[我],=,new 图像(),,,,,
imgages[我].onload =, imgages[我].onerror =,当班的,,,,,
imgages[我].src =, imgList[我];,,,,
},,,,/* *,,,
* *,如果timeout 总时间范围内,仍有图片未加载出来(判断条件是loaded & lt;,总),通知外部环境所有图片均已加载,,,
*,目的是避免用户等待时间过长,,,
*/,,,,
setTimeout (function (), {,,,
loaded & lt;, total ,,, (loaded =,,, callback ,,,回调(时间/loaded 总)),,,,,
},,timeout *,总),,,,,
},,,,,
“function",===, typeof define ,,, define.cmd ?,定义(function (), {,,,
return loader ,,,
}),:,window.imgLoader =,装载机,,,,,
})();
