如果一个页面很长，并且有很多图片，下载图片会花费很多时间，所以它会影响整个页面加载速度，并且延迟加载插件，会滚动到你的加载中。你需要查看图片，然后从后台下载图片，最后显示出来。通过这个插件，你可以在需要显示图片的时候下载图片，这样可以减少服务器的压力，增加页面加载的速度。

延迟加载插件的原理

目标的img元素的src属性修改为原始属性，从而中断图片加载，通过检测滚动状态下创建的是一个缓冲加载的效果，然后恢复IMG SRC属性在网页的视觉区和加载图片代码导入方法：

复制代码代码如下所示：



（文件）Ready。
函数（$）{
$（img）。Lazyload（{
占位符：在加载图片占位符图像之前的图像
效果：显示 / /加载图片的使用效果（淡出）
}）；
}）；



但现在，许多Javaｓｃｒｉｐｔ牛都分析了插件并没有真正起到很慢的作用，的确，当局已经给出了指令和解决方案。

原因是在新版本的浏览器中，即使我们删除javaｓｃｒｉｐｔ控件的SRC属性，浏览器仍然会加载图像。

那我们该怎么办呢事实上，它也很简单。有必要修改HTML结构直接在img标签，添加新的属性，点的src属性的值的占位符图片，添加数据的原始属性，并让它指向图像的真实地址。例如：

复制代码代码如下所示：



当然，在上面的代码中，我们加载页面中的所有图片，但有时我们不想要它。因为有些图片不希望它们延迟加载，所以我们可以这样做。

如果加载类主项下的图像被缓冲

复制代码代码如下所示：
$（。主要IMG）。Lazyload（{
占位符：
效果：显露
}）；


加载安装了懒惰类的图像：

复制代码代码如下所示：
$（img。懒惰）。Lazyload（{
占位符：
效果：显露
}）；


剩下的类比，选择器的适当调整就可以了。

lazyload.js高级使用方法：

以下部分来自官方文件，是对官方文件的简单翻译。

更彻底的方法

我们不得不思考这样一个问题，我们定义了这样一个结构，使源图像将不会加载一个网页。这个源图像将显示只有当Javaｓｃｒｉｐｔ执行。如果用户的浏览器不支持或用户关闭选项支持Javaｓｃｒｉｐｔ，那么我们的形象无法显示，没有Javaｓｃｒｉｐｔ的支持，我们的图片无法显示。

为了解决这个问题，我们需要引入noｓｃｒｉｐｔ标签。大意如下：Noｓｃｒｉｐｔ包含真实图像的位置，当浏览器不支持Javaｓｃｒｉｐｔ，图像直接显示。

复制代码代码如下所示：




现有的图像，隐藏处理，使用显示（）方法来触发显示。

复制代码代码如下所示：
{。懒惰
显示：无；
}


这样，如果浏览器不支持Javaｓｃｒｉｐｔ，我们自定义的图片将不会出现在网络上显示图像，具体的实现代码如下：

复制代码代码如下所示：
$（img。懒惰），Lazyload（）（）；


预压

默认情况是，当你滚动到图片位置时，插件开始加载。这样，用户5月1日看到一个空白图像，然后出现得很慢。如果你想在用户滚动之前提前加载图像，你可以配置参数。

复制代码代码如下所示：
$（img。懒惰）。Lazyload（{
门槛：200
}）；


阈值是一个预先使用的参数，上面的语句意味着当您从图片中获得200个像素时，就开始加载图片。

自定义触发事件

默认触发事件是滚动的，当您滚动时，您检查并加载它。您可以使用事件属性设置自己的加载事件，然后您可以定制触发事件的条件，然后加载映像。

复制代码代码如下所示：
$（img。懒惰）。Lazyload（{
事件：单击
}）；


自定义显示效果

默认的图片实现效果没有效果。下载完成后，它是直接显示。这样的用户体验不好，你可以设置效果的属性来控制显示picture.for效果示例

复制代码代码如下所示：
$（img。懒惰）。Lazyload（{
效果：显露
}）；


是渐显的效果，改变图片的透明度，有办法。

将图像插入容器中

如果您使用智能手机，经常到网站上下载应用程序容器应用程序，他们通常使用横向放置一些移动电话。使用容器属性，很容易在容器中实现缓冲加载。首先，我们需要用CSS定义容器，然后用这个插件加载它。

复制代码代码如下所示：
#容器{身高：600px；溢出：滚动；}
$（img。懒惰）。Lazyload（{
容器：$（#容器）
}）；


负载无形形象

一些图像是不可见的，我们添加的图片显示：无；其他属性。默认情况下，插件不加载隐藏看不见的图像。如果需要加载的图像隐藏它，我们需要设置skip_invisible假，和代码如下：
复制代码代码如下所示：
$（img。懒惰）。Lazyload（{
skip_invisible：假
}）；


嗯，是的lazyload.js插件的简单介绍。