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

2020-03-24 19:09:43

字体：大中小

来源：转载

供稿：网友

在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载的处理，当用户打开页面的时候不立即显示第一屏，而是先显示资源加载效果，等到加载完毕，再来显示页面的主内容，这样就能解决那个问题。虽然这种加载效果占用了用户的浏览时间，但是我们可以把它做的好看有趣一点，所以也不会影响用户体验。本文实践了这种想法，提供一个非常简洁的图片预加载组件，实现简单，功能不弱，在做移动页面的时候应该对你有参考价值。
效果：
Hammer.js+轮播原理实现简洁的滑屏功能介绍的滑屏思路，并把它的一些逻辑包装在了swipe.js，对外提供了一个html' target='_blank'>全局变量Swipe，这个模块有一个init的方法，以便外部通过调用Swipe.init()就能初始化滑屏相关的功能，原来没有提供这个init方法，在js加载完毕就会初始化滑屏功能，有了这个init方法就可以把滑屏的逻辑延迟到加载完毕的时候去初始化。index.html一共引用了5个js： XML/HTML Code复制内容到剪贴板
scriptsrc= js/zepto.js /script scriptsrc= js/transition.js /script scriptsrc= js/hammer.js /script scriptsrc= js/imgLoader.js /script scriptsrc= js/swipe.js /script
其中imgLoader.js就是前面介绍图片加载器的实现，前三个js都是为最后一个swipe.js服务的，感兴趣的可以继续我的博客利用轮播原理结合hammer.js实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理解本文的内容~
2）虽然我在demo中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个loading效果，实现方式是： XML/HTML Code复制内容到剪贴板
varcallbacks=[]; imgLoader(['img/page1.jpg','img/page2.jpg','img/page3.jpg'],function(percentage){ vari=callbacks.length; callbacks.push(function(){ setTimeout(function(){ varpercentT=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){ varpercentT=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插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究。同时感谢大家一直以来对phpstudy网站的支持！html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML里的最后一行文字显示不全怎么处理

下一篇：HTML代码书写规范指南