jquery.lazyload实现延迟加载

jquery.lazyload实现延迟加载图片技术简单记录，以备不时之需。

欲使用jquery.lazyload，需在页面引入如下js

<script src="resources/lib/jquery.js"></script>
<script src="resources/lib/jquery.lazyload.js"></script>

为页面需要延迟加载的img添加lazy样式，图片引用用data-original

<a href="#"><img class="lazy" data-original="resources/stylesheet/images/qr_vp203.png"/></a>
<img class="lazy" data-original="<s:text name="TP10202"/>" style="width:100%;"/>
<img class="lazy" data-original="<s:text name="TP10203"/>" style="width:100%;"/>
<img class="lazy" data-original="<s:text name="TP10204"/>" style="width:100%;"/>
<img class="lazy" data-original="<s:text name="TP10205"/>" style="width:100%;"/>
<img class="lazy" data-original="<s:text name="TP10206"/>" style="width:100%;"/>

lazyload技术实现的js方法

<script type="text/javascript">

  $(function(){
    $("img.lazy").lazyload({
	/*图片占位*/
	placeholder : "img/grey.gif",
	/*图片载入方式，effect(特效)、show(直接显示)、fadein(淡入)、slideDown(下拉)等*/
	effect: "fadeIn",
	/*提前加载图片，200表示距离显示窗口200px开始加载图片*/
	threshold : 200,
	/*加载触发方式，click(点击),mouseover(鼠标划过),sporty(自定义触发),foobar(这个没用过)，通过这些操作触发加载图片*/
	event : "sporty",
	/*图片排序混乱时，可以使用failurelimit来控制加载行为，10表示加载10张不在当前可视区域图片*/
	failurelimit : 10,
    });  });
  /*sporty绑定自定义图片加载触发条件*/
  /*如下，表示在页面加载完成后5秒，开始加载图片*/
  $(window).bind("load", function() {
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
  });
  /*如下，表示在超链接#productTab a:eq(0)被点击时加载图片*/
  $("#productTab a:eq(0)").click(function() {
    setTimeout(function() {$(".tab-pane:eq(0) img.lazy").trigger("sporty")}, 0);
  });
</script>

lazyload.js下载：http://download.csdn.net/detail/haibiaoye/9177009