今天学习了MUI框架实现懒加载效果,再次感叹 深海老师 不亏为大神。实现方法非常的简单,只需要设置图片的预加载占位图及其实际地址。
先说一下自己理解的懒加载的定义:在APP中懒加载就是讲所有需要展示的图片全部换成展位图(最好是字体图标)保存在程序当中;当程序开始运行的时候,
只会在首页中加载能背用户看到的图片,其他区域的图片全被设定为展位图,而那些占位图只会在你触发他的时候,或者说你的界面包含他的时候才会加载。这样大大的节省了程序开启时的加载时间,提高了用户体验。
使用HUI实现图片的懒加载就只有一段代码(其他的一大长串的代码已经被深海老师封装起来了):
hui.lazyLoad();//声明一个变量,告诉系统我要开始懒加载了;
//懒加载的判断事件为页面开始滚动,而且只加载可视区域内,
<img src='占位图' class='HUI_Lazy' lazySrc='图片的实际地址' />
//这段代码最常见的状态一般出现在解析JSON时,将图片代码更改为这种格式就OK拉~
讲这段代码添加到你的程序之中后虽然懒加载已经可以使用了,但是并不完美。他有一个小小的问题:你在刷新完成后必须触发滚动事件才会显示图片,那么在添加一句代码就可以解决了。
hui.lazyLoadNow();//代码的意思为立即执行懒加载
这代代码一般放置在将<img/>元素innerHTML到你需要的位置以后。
注:如果你的类名称 class=“”没有设置成HUI_Lazy 那么你只需要将你设定的className放置在
hui.lazyLoadNow();的括号内即可!~