很多时候,用户在第一屏就发生了跳转,大量“未曾露面”的图片下载对用户来说是无意义的。DataLazyload 可以“揣测”用户的行为,当用户想看某个区域时,才开始下载这个区域的图片。
除了延迟图片下载,DataLazyload 还可以延迟某个区域的所有 html 的渲染,这对 Tabs 等 UI 组件很有裨益,能提高整个页面的性能。
如何调用呢,只需要如下简单的代码:
KISSY.ready(function(S) {
S.DataLazyload( { mod: 'auto' } );
});
这样,页面加载时就会自动延迟所有图片的下载,以及延迟特定 textarea 里的 html 渲染。
具体配置参数,推荐看下源码的开头部分:datalazyload.js. 相关注意事项,推荐阅读源码最后的注释。推荐采用 manual 模式,这样获得的效果最好。
讲起来有些枯燥,来看下示例吧,相信你一看就能明白:
manual 模式:test.html
auto 模式:test-auto.html
home › datalazyload :