JavaScript实现图片延迟加载技术

 

 

 

--ImageLazyLoad及实现原理

2010-12-29 14:41

如果留意淘宝的话,应该可以注意到:当打开产品页面后，并不是把页面中图片都下载下来,而是随着滚动条的滚动而加载图片.这样可以使页面载入速度更快,节省网站流量,减少服务器的负载.你可以灵活的把这一技术运用在存在大量图片的页面,比如频道页、活动页、搜索结果页等…… LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader 和Bing图片搜索 就把 LazyLoad技术运用的淋漓尽致； 什么是ImageLazyLoad技术     在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。     眼下网上使用此技术的网站有太多太多，如淘宝，还有一些动漫网站，他们都使用了这种技术。     眼下比较常用的图片延迟加载技术有四种：kissy(淘宝的JS框架),Jquery 图片延迟插件，Prototype，YUI 2。      抽时间去网上查查了，YUI的图片延迟技术是最成熟的，Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术（Lazyloader is inspired by  YUI   ImageLoader   Utility by Matt Mlinac） 怎么实现ImageLazyLoad 在页脚添加以下代码即可： 大家可以直接采用淘宝的延迟加载技术： http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js 调用方法也是很简单的：  <script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js"  type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script> 注：该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址: <script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js " type="text/javascript"></script> 至于高级配置，大家可以看这里 ; 配置参数如下： <script type="text/javascript"> KISSY.ImageLazyload({ mod: "manual", // 延迟模式。默认为 auto diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载 }); </script> manual 模式时，需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面，宝贝列表的后20个图片延迟加载。输出时，html 代码为： <img data-lazy-src = "path/to/img" alt = "something" /> 如果您是Jquery，Prototype等这些JS框架的粉丝，他们都有定制的LazyLoad Plugin提供； 可查看http://www.appelsiini.net/2009/12/tuning-lazy-loader   Jquery 用法： 1.导入JS插件 <script src="jquery.js" type="text/javascript"></script>    <script src="jquery.lazyload.js" type="text/javascript"></script>   2.在你的页面中加入如下的javascript：   $("img").lazyload();    这将会使所有的图片都延迟加载。  当然插件还有几个配置项可供设置。  1.改变threshold  $(“img”).lazyload({  threshold   : 200 });  把阀值设置成200 意思就是当图片没有看到之前先load 200像素。  2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件 $("img").lazyload({       placeholder : "img/grey.gif",        event   : "click"  }); 3.可以通过定义effect 参数来定义一些图片显示效果 $("img").lazyload({        placeholder : "img/grey.gif",         effect  : "fadeIn"  });  LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader 和Bing图片搜索 就把LazyLoad技术运用的淋漓尽致； 但做为技术而言没有十全十美的技术，缺点也是有的： 1.与Ajax技术的冲突； 2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题； 3.写代码不规范的朋友要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad。   实现原理： 实现原理很简单，      1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif)，把真真图片的连接放进图片的alt属性中，look下代码：    <a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">     <img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>    </a>         2. 绑定window.scroll事件，在该事件里面的重设所有class为lazyImg的图片的src值，在土豆首页找到如下JS:    var o=function(){      var s=TUI.pos.scrollTop(),q=c;      if(q.box[0]){       var r=q.box.offset().top;         if(r-s>0&&r-TUI.pos.windowHeight()<s){       q.init()        }else{       q.stop()        }      }      if(!h||s<590){return true}     TUI.widget.quickPlaylist.load();     h=false   };     o();     $(window).bind("scroll",o);