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


Posted in HTML / CSS onMarch 11, 2016

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

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

1. 实现思路

html里面的img标签和css中background-imag等都会触发浏览器去加载相关的图片,但是如果这个图片已经加载过了的话,浏览器就会直接使用这张已经加载好的图片,从而能够瞬间在页面中渲染出来。通过javascript,创建Image对象,然后把这些对象的src属性设置成要加载的图片地址也能触发浏览器加载图片,利用这一点就能实现图片预加载的功能:在页面里首先把那些用到了相关的图片的元素给藏掉,然后用js去加载图片,等到所有图片加载完毕再把藏掉的元素显示即可。不过这仅仅是一个基本的实现思路,要完成一个功能较健壮的预加载组件,还有以下三个问题:
1)进度问题
由于预加载的同时,还得做一个预加载的效果,这就需要把加载的进度实时通知到外部上下文才行。关于进度有两个实现方式,第一是已加载的数据大小/总的数据大小,第二是已加载的文件数/总的文件数,在浏览器里面,采用第一种方式是不现实的,根本没有原生的办法可以做到,所以只能采用第二种。
2)图片加载失败的问题
比如说有4张图片,已经加载了50%,在加载第三张的时候出错了,该不该将进度反馈成75%呢?答案是:应该。如果不这么处理的话,进度永远无法到100%,页面主内容就没机会显示了,虽然图片加载有失败的情况,但是跟加载器没有关系,也许图片本身就不存在呢?也就是说图片加载失败不应该影响加载器的功能。
3)图片加载超时的问题
图片不能加载太久,否则用户一直停留在加载效果上看不到主内容,用户的等待时间不可控制地延长,导致用户体验下降,这样就有悖加载器的初衷了。所以应该给每个图片设置一个加载的超时时间,如果在所有图片的超时时间之后,还没加载完,就应该主动放弃加载,通知外部上下文加载完毕,显示主内容。
综合以上这些需求,本文提供的实现是:

JavaScript Code复制内容到剪贴板
  1. (function () {    
  2. function isArray(obj) {    
  3. return Object.prototype.toString.call(obj) === '[object Array]';    
  4. }    
  5. /**   
  6. * @param imgList 要加载的图片地址列表,['aa/asd.png','aa/xxx.png']   
  7. * @param callback 每成功加载一个图片之后的回调,并传入“已加载的图片总数/要加载的图片总数”表示进度   
  8. * @param timeout 每个图片加载的超时时间,默认为5s   
  9. */    
  10. var loader = function (imgList, callback, timeout) {    
  11. timeout = timeout || 5000;    
  12. imgList = isArray(imgList) && imgList || [];    
  13. callback = typeof(callback) === 'function' && callback;    
  14. var total = imgList.length,    
  15. loaded = 0,    
  16. imgages = [],    
  17. _on = function () {    
  18. loaded < total && (++loaded, callback && callback(loaded / total));    
  19. };    
  20. if (!total) {    
  21. return callback && callback(1);    
  22. }    
  23. for (var i = 0; i < total; i++) {    
  24. imgages[i] = new Image();    
  25. imgages[i].onload = imgages[i].onerror = _on;    
  26. imgages[i].src = imgList[i];    
  27. }    
  28. /**   
  29. * 如果timeout * total时间范围内,仍有图片未加载出来(判断条件是loaded < total),通知外部环境所有图片均已加载   
  30. * 目的是避免用户等待时间过长   
  31. */    
  32. setTimeout(function () {    
  33. loaded < total && (loaded = total, callback && callback(loaded / total));    
  34. }, timeout * total);    
  35. };    
  36. "function" === typeof define && define.cmd ? define(function () {    
  37. return loader    
  38. }) : window.imgLoader = loader;    
  39. })();   

使用方式(对应代码中的test.html):

XML/HTML Code复制内容到剪贴板
  1. <script src="../js/imgLoader.js"></script>    
  2. <script>    
  3. imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){    
  4. console.log(percentage)    
  5. });    
  6. </script>   

运行结果:

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

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

XML/HTML Code复制内容到剪贴板
  1. <script src="js/zepto.js"></script>    
  2. <script src="js/transition.js"></script>    
  3. <script src="js/hammer.js"></script>    
  4. <script src="js/imgLoader.js"></script>    
  5. <script src="js/swipe.js"></script>   

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

XML/HTML Code复制内容到剪贴板
  1. //模拟加载慢的效果    
  2. var callbacks = [];    
  3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
  4. var i = callbacks.length;    
  5. callbacks.push(function(){    
  6. setTimeout(function(){    
  7. var percentT = percentage * 100;    
  8. $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
  9. $('#loader__progress')[0].style.width = percentT + '%';    
  10. if (percentage == 1) {    
  11. setTimeout(function(){    
  12. $('#loader').remove();    
  13. Swipe.init();    
  14. }, 600);    
  15. }    
  16. callbacks[i + 1] && callbacks[i + 1]();    
  17. },600);    
  18. });    
  19. if(percentage == 1) {    
  20. callbacks[0]();    
  21. }    
  22. });   

在真实环境,最好还是不要刻意去加这种延迟,没必要为了让用户看到一个好看有趣的加载效果,就浪费它不必要的等待时间,所以真实环境还是应该用下面的代码:

XML/HTML Code复制内容到剪贴板
  1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
  2. var percentT = percentage * 100;    
  3. $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
  4. $('#loader__progress')[0].style.width = percentT + '%';    
  5. if (percentage == 1) {    
  6. $('#loader').remove();    
  7. Swipe.init();    
  8. }    
  9. });   

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

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5 标签
Jul 16 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 #HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 #HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 #HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 #HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 #HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 #HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 #HTML / CSS
You might like
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python中的index()方法使用教程
2015/05/18 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
利用python汇总统计多张Excel
2020/09/22 Python
Python的信号库Blinker用法详解
2020/12/31 Python
什么是规则表达式
2012/05/03 面试题
2015年党员创先争优承诺书
2015/01/22 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
解决vue中provide inject的响应式监听
2022/04/19 Vue.js