jquery.lazyload实现延迟加载

最新推荐文章于 2025-12-01 11:20:32 发布

原创最新推荐文章于 2025-12-01 11:20:32 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 jQuery LazyLoad 插件实现图片懒加载技术。通过在页面中引入必要的 JavaScript 文件，并设置图片的 lazy 类及 data-original 属性，配合自定义的 JavaScript 初始化代码，实现当图片进入可视区域时自动加载的功能。

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>