惰性加载是一个用JavaScript编写的jQuery插件。它可以延迟长页面中图片的加载。在用户将页面滚动到其位置之前，不会加载浏览器可见区域之外的图片。这和图片预加载的处理方法正好相反。

在包含许多大图片的长页面中延迟加载图片可以加快页面的加载速度。加载可见图片后，浏览器将进入就绪状态。在某些情况下，它还可以帮助减轻服务器的负担。

如何使用？

延迟加载依赖于jQuery。请在：页头区域添加以下代码

复制代码的代码如下： script src=' http 3360 jquery . js ' type=' text/JavaScript '/script script src=' http : jquery . lazy load . js ' type=' text/JavaScript '/script

您必须修改HTML代码。在src属性中设置展台符号图片，在演示页面使用11像素灰色GIF图片。您需要将真实图片的网址设置为数据原始属性。在这里，您可以定义一个特定的类来获取需要延迟加载的图片对象。这样，您可以简单地控制插件绑定。

复制代码如下： img class=' lazy ' src=' http : img/grey . gif ' data-original=' img/example . jpg ' width=' 640 ' heigh=' 480 '

处理图片的代码如下。

复制代码如下：$('img.lazy ')。lazy load()；

这会延迟加载所有带有惰性类的图片。您可以参考基本选项演示

设置灵敏度

几乎所有的浏览器都激活了JavaScript。但是，您可能仍然希望在不支持JavaScript的客户端上显示真实图片。当浏览器不支持JavaScript时，它们会优雅地降级，您可以在noscript标记中写入真实图片。

复制代码如下： img class=' lazy ' src=' http : img/grey . gif ' data-original=' img/example . jpg ' width=' 640 ' heigh=' 480 ' no script img src=' http : img/example . jpg ' width=

您可以通过CSS隐藏占位符。

复制代码如下：lazy { display: none}

在支持JavaScript的浏览器中，当DOM准备好时，必须显示占位符，这可以在插件初始化的同时完成。

复制代码如下： $ ('img。懒惰’)。显示()。lazy load()；

这些都是可选的，但是如果您希望插件平稳降级，就应该这样做。

默认情况下，图片出现在屏幕上时会被加载。如果想提前加载图片，可以设置阈值选项，将阈值设置为200，使图片在距离屏幕200像素时提前加载。

复制代码如下： $ ('img。懒惰’)。惰性加载({ threshold : 200 })；

占位图片

您还可以设置占位符图片并定义一个事件来触发加载操作。此时，您需要为占位符图片设置一个网址。插件中包含了11像素的透明、灰色和白色图片。

事件触发加载

事件可以是任何jQuery时间，例如：点击和鼠标悬停。您还可以使用用户定义的事件，例如：sports和foobar。默认情况下，它会一直等到用户滚动到图片在窗口上的位置。您可以阻止在单击灰色占位符图片之前加载图片。你可以做这个3360。

复制代码如下： $ ('img ')。lazy load({ placeholder : ' img/grey . gif '，event : ' click ' })；

使用特效

图片完全加载后，插件默认使用show()方法显示图片。事实上，你可以使用任何你想处理的特效。下面的代码使用了FadeIn效果。这是效果演示页面。

复制代码如下： $ ('img。懒惰’)。惰性加载({effect3360 '淡入' })；

图片在容器里

您可以在可滚动容器的图片上使用插件，例如带有滚动条的DIV元素。您所要做的就是将容器定义为jQuery对象，并将它们作为参数传递给初始化方法。这些是水平滚动的演示页面和垂直滚动的演示页面。

复制代码如下： #容器{ height : 600px飞越：卷轴；}$('img.lazy ')。lazy load({ container : $(' # container ')})；

当图片出现问题时，

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

复制代码如下： $ ('img。懒惰’)。惰性加载({ failure _ limit :10 })；

将failurelimit设置为10会使插件在发现10张不在可见区域的图片时停止搜索。如果您的布局很简单，请将此参数设置得更高。

延迟加载图片

Lazy Load插件是一个不完整的功能，但也可以用来实现图片的延迟加载。下面的代码实现了页面将在加载后被加载。5秒后，指定区域的图片会自动加载。这是一个延迟加载演示页面。

复制代码如下： $(function(){ $(' img :-fold下')。lazy load({ event : ' sport ' })；});$(窗口)。bind('load '，function(){ var time out=setTimeout(function(){ $(' img . lazy ')。扳机(‘运动’)}，5000)；});

加载隐藏图片

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

复制代码如下： $ ('img.lazy ')。惰性加载({ skip _ invisible : false })；

以上就是本文的全部内容，希望大家喜欢。

请花一点时间与你的朋友分享这篇文章或留下评论。我们将真诚感谢您的支持！