很多时候,用户在第一屏就发生了跳转,大量“未曾露面”的图片下载对用户来说是无意义的。DataLazyload 可以“揣测”用户的行为,当用户想看某个区域时,才开始下载这个区域的图片。

除了延迟图片下载,DataLazyload 还可以延迟某个区域的所有 html 的渲染,这对 Tabs 等 UI 组件很有裨益,能提高整个页面的性能。

如何调用呢,只需要如下简单的代码:


                    KISSY.ready(function(S) {
                        S.DataLazyload( { mod: 'auto' } );
                    });
                

这样,页面加载时就会自动延迟所有图片的下载,以及延迟特定 textarea 里的 html 渲染。

具体配置参数,推荐看下源码的开头部分:datalazyload.js. 相关注意事项,推荐阅读源码最后的注释。推荐采用 manual 模式,这样获得的效果最好。

自动模式与手动模式讨论


                    var dataLazyload =DataLazyload({
                        placeholder : "占位.png"//不设为空
                        mod:'auto'//默认 manual 手动模式
                    });
                

自动模式:


    <img src="xx.png"/>

首先把当前视窗外的 img 的 src 保存在自定义属性中,并将src 替换为 placeholder (不指定为空),当滚动导致该图片出现在当前视窗时将 src 设置已经保存的真实值。

讨论:

  1. 在 IE,Firefox 下不尽完美。脚本运行时,有部分图片已经与服务器建立链接,导致这部分图片 abort 掉,再在滚动时延迟加载,反而增加了链接数。
  2. 在 Safari 和 Chrome 下,因为 webkit 内核 bug,导致无法 abort 掉下载。该 脚本完全无用。
  3. 当 js 禁用时图片仍然可以全部显示。

手动模式:


                    <img data-ks-lazyload="xx.jpg"//>
                

可以不设置 img 的 src 属性,但是必须设置 img 的 data-ks-lazyload 自定义属性为真实图片地址,当滚动导致该图片出现在当前视窗时会将 src 设置为真实地址。

讨论:

  1. 在任何浏览器下都可以完美实现,不增加额外http连接数。
  2. 缺点是不渐进增强,无 JS 时,图片不能展示。

textarea 延迟加载

这种情况下和模式的手动自动没关系:

  1. 页面中需要延迟的 dom 节点,放在
    
        <textarea class='ks-datalazyload invisible'/>dom code</textarea/>
    
    里。可以添加 hidden 等 class, 但建议用 invisible (visiblity:hidden), 并设定 height = '实际高度',这样可以保证滚动时无缝连接。 当滚动导致该 textarea 出现在当前视窗时会将该 textarea 内的 html 添加到新生成的 div 中,并用新生成的 di v替换该 textarea .
  2. 延迟 callback 约定:dataLazyload.addCallback(el, fn) 表示当 el 即将出现时,触发 fn.
  3. 所有操作都是最多触发一次,比如来回拖动滚动条时,只有 el 第一次出现时会触发 fn 回调。

讲起来有些枯燥,来看下示例吧,相信你一看就能明白:
manual 模式:test.html
auto 模式:test-auto.html

home › datalazyload :