这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
KISSY懒加载data lazyload 的应用
2014年01月02日 JavaScript ⁄ 共 4284字 等你评论

WTF

懒加载,指图片、数据的延迟加载。即页面加载时,不立即下载所有的图片,或不立即渲染所有html代码块。当用户滚动到,或触发显示隐藏区块之后,才加载相应内容。

目的是节省图片服务器流量、减少浏览器性能消耗。

懒加载有两个主要的应用场景:

  • 很多时候,用户只会在某个页面上停留在第一屏,加载第一屏以下的图片资源会造成很大浪费。使用图片懒加载,可以让这部分资源“按需加载”,避免一部分带宽的浪费;
  • 对于选项卡等应用,隐藏部分的html不直接解析,在触发显示时解析,可以节省一部分渲染开销。

使用KISSY.DataLazyload

DataLazyload是kissy的一个组件,目前在淘宝已被广泛应用。

另附tps中loading图片大集合http://tps.tms.taobao.com/photo/search.htm?q=loading.gif

其实现原理请阅读 他的博客 ,本篇只介绍使用方法。

使用

调用方法:

  1. KISSY.ready(function(S) {  
  2.     S.DataLazyload( {   
  3.                      mod: 'auto', //模式:'auto'自动 'manual'手动  
  4.                      diff: 200, //当前视窗往下 diff px内进行预先加载,默认为当前视窗高度  
  5.                      placeholder: 'http://img04.taobaocdn.com/tps/i4/T1T94UXmBkXXXXXXXX-400-400.jpg_160x160.jpg' //未加载前的图像占位符,默认为空  
  6.                      });  
  7. });  

 

模式

手动模式(推荐):

需要将 img 标签的 src 属性改为 data-ks-lazyload :

  1. <img data-ks-lazyload="http://img04.taobaocdn.com/tps/i4/T1T94UXmBkXXXXXXXX-400-400.jpg_160x160.jpg" />  

 

优点:

  • 浏览器兼容性好

缺点:

  • 禁用JS的情况下,图片不能正常显示,无法优雅降级

自动模式

不需要改变 img 的 src 属性,由JS改变 img 的 src 标签。

缺点:

  • 浏览型兼容性不佳:Firefox、opera支持较好;IE不尽完美;webkit浏览器完全无效

优点:

  • 客户端禁用JS的情况下,也可以按传统方式加载图片显示。

html代码块的懒加载

html代码块放在textarea标签中加载到页面上,可以禁止代码块的渲染,在需要渲染的时候,用JS取出textarea的内容,建立dom结构。从而达到节省资源、提高性能的目的。

使用kissy的data-lazyload组件进行html代码的懒加载,需要将代码包含在 class 为 ks-datalazyload-custom 的 textarea 标签中:

  1. <textarea class="ks-datalazyload-custom">  
  2.      <div>延迟加载的内容</div>  
  3. </textarea>  

 

注意的问题:

  • 1. textarea建议设定 height = '实际高度',这样可以保证滚动时,diff 更真实有效。注意:textarea 加载后,会替换掉父容器中的所有内容。
  • 2. 延迟 callback 约定:dataLazyload.addCallback(el, fn) 表示当 el 即将出现时,触发 fn.
  • 3. 所有操作都是最多触发一次,比如 callback. 来回拖动滚动条时,只有 el 第一次出现时会触发 fn 回调。

tab选项卡的懒加载

tab选项卡的数据懒加载是一个重要的应用场景。当用户切换到某个tab时,再渲染其html内容,加载图片资源,可以节省可观的流量。

使用 kissy 的 switchable 组件,配合 datalazyload 组件可以方便的实现tab选项卡内容懒加载。

实现要点:

  • 将选项卡内容部分的html代码包进 <textarea class=“ks-datalazyload-custom”> 中;
  • 默认显示的选项卡内容部分不必做懒加载
  1. <div class="tab-cont">  
  2.     tab1内容  
  3. </div>  
  4. <div class="nh-cont">  
  5.     <textarea class='ks-datalazyload-custom'>  
  6.     tab2内容  
  7.     </textarea>  
  8. </div>  
  9. <div class="nh-cont">  
  10.     <textarea class='ks-datalazyload-custom'>  
  11.     tab3内容  
  12.     </textarea>  
  13. </div>  

 

启用 webp 模式

js 部分:

  1. <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script>  
  2. <script>  
  3. var S = KISSY;  
  4. if (S.Config.debug) {  
  5.     var srcPath = "../../../";  
  6.     S.config({  
  7.         packages:[  
  8.             {  
  9.                 name:"gallery",  
  10.                 path:srcPath,  
  11.                 charset:"utf-8",  
  12.                 ignorePackageNameInUri:true  
  13.             }  
  14.         ]  
  15.     });  
  16. }  
  17. // 启用 webp  
  18. KISSY.use('gallery/datalazyload/1.0.1/index', function (S, DataLazyload) {  
  19.     DataLazyload('#test', {  
  20.         onStart:function(obj) {  
  21.             var startTime= S.now();  
  22.             obj.elem.onload=obj.elem.onerror=function(){  
  23.                 obj.elem.onload=obj.elem.onerror=null;  
  24.                 console.log(["loadetime:",S.now()-startTime,obj.elem.src]);  
  25.             }  
  26.         }  
  27.     });  
  28. });  
  29. </script>  

html 部分:

  1. <div id="test">  
  2.     <p><img src="http://gtms01.alicdn.com/tps/i1/T1sShxFutaXXb6ROYh-48-48.gif" data-ks-lazyload="http://img03.taobaocdn.com/tps/i3/T1prVTXpVcXXa6XtY7-490-170.png" /></p>  
  3.   
  4.     <p><img src="http://gtms01.alicdn.com/tps/i1/T1sShxFutaXXb6ROYh-48-48.gif" data-ks-lazyload="http://i.mmcdn.cn/simba/img/T1DspSXrNeXXb1upjX.jpg" /></p>  
  5.   
  6.     <p><img src="http://gtms01.alicdn.com/tps/i1/T1sShxFutaXXb6ROYh-48-48.gif" data-ks-lazyload="http://i.mmcdn.cn/simba/img/T1Cl4vXpJbXXb1upjX.jpg" /></p>  
  7.   
  8.     <p><img src="http://gtms01.alicdn.com/tps/i1/T1sShxFutaXXb6ROYh-48-48.gif" data-ks-lazyload="http://img02.taobaocdn.com/tps/i2/T1OfNTXyleXXa6XtY7-490-170.png" /></p>  
  9.   
  10.     <p><img src="http://gtms01.alicdn.com/tps/i1/T1sShxFutaXXb6ROYh-48-48.gif" data-ks-lazyload="http://i.mmcdn.cn/simba/img/T1WRNBXthbXXb1upjX.jpg" /></p>  
  11.   
  12.     <p><img data-ks-lazyload="http://img01.taobaocdn.com/tps/i1/T1Pk2NXe8hXXXH_oTs-96-96.gif" /></p>  
  13.   
  14.     <p><img data-ks-lazyload="http://img02.taobaocdn.com/tps/i2/T1zqNUXAdcXXaCwpjX.png" /></p>  
  15.   
  16.     <p><img data-ks-lazyload="http://img01.taobaocdn.com/tps/i1/T1H50UXAlcXXaCwpjX.png" /></p>  
  17.   
  18.     <p><img data-ks-lazyload="http://img02.taobaocdn.com/tps/i2/T15OhHXwhbXXcE7fze-700-320.png" /></p>  
  19.   
  20.     <p><img data-ks-lazyload="http://img02.taobaocdn.com/tps/i2/T15OhHXwhbXXcE7fze-700-320.png" /></p>  
  21.   
  22.     <p><img data-ks-lazyload="http://img01.taobaocdn.com/tps/i1/T1qPRVXuJcXXaCwpjX.png" /></p>  
  23. </div>  

 

【上篇】
【下篇】
友荐云推荐
×