Lazyload是一个用Javascript编写的jQuery插件，可以延迟加载长页面中的图片，在用户将图片滚动到其所在位置之前，浏览器可见区域之外的图片不会被加载。

像bootstrap一样，lazyload.js依赖于jQuery

脚本src=' http : resources/js/jquery-1 . 8 . 3 . min . js '/脚本src=' http 3360 resources/js/jquery . lazy load . min . js '/脚本与之前的图片介绍路径不同，真实图片路径不再是数据-原始。src属性用于引入占位符图像(当然，个人建议不要在img标签中写入占位符)。同时，必须设置img的宽度和高度，并且必须为每个惰性图像添加一个类。例如，的四个属性。lazy必须有：类数据-原始宽度高度

img class=' lazy ' width=' 640 ' height=' 480 ' data-original=' resources/images/2 . jpg '

如果你想让所有带有lazy类的图片都变懒，你只需要一行简单的代码

script src=' http : resources/js/jquery-1 . 8 . 3 . min . js '/script script src=' http : resources/js/jquery . lazy load . min . js '/script script $(' img . lazy ')。lazy load()；/script/body/html设置临界点

默认情况下，图片出现在显示区域时会被加载。如果想提前加载图片，可以设置阈值选项，比如将ThreadHold设置为200，这样当图片距离显示区域200px时，就会提前加载图片。

$('img.lazy ')。lazyload({ threshold:200，})；设置占位符

如前所述，您可以使用img标记的src属性来引入图像，如loading.gif，而不是不进入显示区域的要加载的图像。我们还可以添加占位符选项来实现这一点

$('img.lazy ')。lazy load({ place holder : ' resources/images/loading . gif ' })；设置事件以触发加载

您可以使用jQuery事件，如单击和鼠标悬停，也可以使用自定义事件。默认情况下，只有当用户向下滚动并且图像出现在显示区域中时，才会触发。例如，仅当用户单击时才加载图像

$('img.lazy ')。lazy load({ event : ' click ' })；

使用特效

默认情况下，插件在等待图像完全加载后调用show()方法来显示图像。我们也可以使用一些特殊效果，比如fadeIn

$('img.lazy ')。lazy load({ effect : ' FADEin ' })；图片在容器里

它可以用在容器的可滚动图片上，例如带有滚动条的DIV元素。容器需要被定义为jQuery对象，并作为参数传递给初始化方法，例如垂直滚动

#集装箱{ height: 600px飞越：卷轴；} img class=' lazy ' data-original=' img/example . jpg ' width=' 765 ' height=' 574 ' $(' img . lazy ')。lazyload({ effect : 'fadeIn '，container : $(' # container ')})；当图片出现问题时，

滚动页面时，惰性加载会循环加载图片。在循环中，它将检查图片是否在可见区域。默认情况下，当找到不在可见区域的第一张图片时，它将停止循环。图片被认为是流式分发，页面中图片的顺序与HTML代码中的顺序相同。然而，在某些布局中，这一假设并不成立。但是，您可以通过failurelimit选项控制加载行为。

$('img.lazy ')。lazy load({ failure _ limit : 10 })；将failurelimit设置为10会使插件在发现10张不在可见区域的图片时停止搜索。如果您的布局很简单，请将此参数设置得更高。

加载隐藏图片

您的页面中可能隐藏了许多图片。例如，插件用于过滤列表，您可以不断修改列表中每个项目的显示状态。为了提高性能，默认情况下，惰性加载会忽略隐藏图片。如果要加载隐藏图片，请将skip_invisible设置为false。

$('img.lazy ')。lazy load({ skip _ invisible : false })；以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助。有问题可以留言交流。感谢大家的支持！