jQuery延迟加载插件延迟加载用法指南

延迟加载是一个由jQuery插件编写的Javaｓｃｒｉｐｔ。它可以延迟图片中的加载页面。在浏览器外部的图片区域将不会被加载，直到用户将滚动到他们所在的页面。这种图像处理和预加载模式正好相反。

在许多带有大图片的页面中，延迟图片加载可以加快页面加载速度。浏览器加载可见图片后将进入就绪状态。在某些情况下，它也有助于减轻服务器负担。
如何使用它

延迟负载依赖于jQuery。将以下代码添加到页面头部区域：

复制代码代码如下所示：

您必须使用演示图像、1×1像素灰度GIF图像修改SRC属性设置Booth字符页中的HTML代码。并将实际URL设置为数据原始属性。您可以定义特定的类以获得所需的延迟加载图像对象。一个简单的控件插件，通过这个方法可以绑定。

复制代码代码如下所示：
处理图片的代码如下所示。

复制代码代码如下所示：

$（img。懒惰）Lazyload（）；
这将允许所有类延迟图像被延迟。您可以参考基本选项，演示

灵敏度设置

几乎所有浏览器的Javaｓｃｒｉｐｔ都被激活。但是，也许您仍然希望在不支持Javaｓｃｒｉｐｔ的客户机上显示真正的图片。当浏览器不支持Javaｓｃｒｉｐｔ，优雅降级时，您可以将真正的图片剪辑放入标记中。

复制代码代码如下所示：

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

复制代码代码如下所示：

{。懒惰

显示：无；

}
在支持Javaｓｃｒｉｐｔ的浏览器中，必须在DOM中显示占位符，这可以在插件初始化时完成。

复制代码代码如下所示：

$（img。懒惰），Lazyload（）（）；
这些都是可选的，但如果希望插件顺利降级，则应该执行这些操作。

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

复制代码代码如下所示：

$（img。懒惰）。Lazyload（{门槛：200 }）；
占位图片

您还可以设置占位符映像并定义事件来触发加载操作。然后我们需要为占用图片设置URL地址。插件中包含透明、灰色和白色1×1像素的图片。

事件触发加载

事件可以是任何jQuery的时间，如：单击鼠标悬停。你也可以使用自定义的事件，如运动和foobar。默认情况下，在等待状态，直到用户滚动到图像出现在窗口上。在灰色占位符图片被点击停止加载图片之前，你可以做：

复制代码代码如下所示：

$（img）。Lazyload（{

位置：IMG /灰色。GIF

事件：单击

}）；
使用特殊效果

当图片被完全加载时，默认情况下显示插件是使用显示（）方法。事实上，你可以使用任何你想使用的特效。下面的代码使用FadeIn效果。这是效果演示页面。

复制代码代码如下所示：

$（img。懒惰）。Lazyload（{

效果：显露

}）；
照片在容器里。

你可以在可滚动的容器的图像使用的插件，如滚动div元素。您所要做的就是将容器定义为jQuery对象，并将其作为参数传递给初始化方法。这是水平滚动演示页面和垂直滚动演示页面。

复制代码代码如下所示：

{ #容器

身高：600px；

溢出：滚动；

}

$（img。懒惰）。Lazyload（{

容器：$（#容器）

}）；
当图片没有按顺序排列时

滚动页面时，延迟加载将循环加载图片。环路检测中的视觉区域。默认情况下，在图片的可见区域找到的第一个图像在考虑图片时不会停止循环。页面序列上的流分布、同一顺序和HTML代码。但在某些布局中，这种假设是不成立的。但你可以用failurelimit选项来控制加载行为。

复制代码代码如下所示：

$（img。懒惰）。Lazyload（{

failure_limit：10

}）；
设置为10阶failurelimit插件找到10张图片中不可见区域可见。然后停止搜索。如果您有一个肮脏的布局，请设置参数一点点。

延迟加载图片

一个完整的懒人加载插件，但也可以用来实现延迟加载的图片。加载完成后，下面的代码页加载。页面加载完成后5秒，指定区域的图像自动加载。这是演示页面的延迟加载。

复制代码代码如下所示：

$（函数（）{（））

$（img：以下）。Lazyload（{

活动：运动

}；}）；$（窗口）。Bind（加载

VaR超时= setTimeout（函数（）{ $（img。懒惰）。Trigger（运动）；}）}，5000）；
加载隐藏图片

可能在你的页面上可以埋藏很多隐藏的图片。如插件在列表上进行筛选，可以在显示状态下继续修改列表。为了提高懒惰的性能，默认负载忽略了隐藏的图片。如果你想加载隐藏图片，请设置skip_invisible假

复制代码代码如下所示：

$（img。懒惰）。Lazyload（{

skip_invisible：假

}）；
以上是本文的全部内容，希望大家能喜欢。

请花些时间与朋友分享这篇文章，或者留下评论，我们要感谢你的支持！