如果一个网页很长并且有很多图片的话，下载图片就需要很多时间，那么就会影响整个网页的加载速度，而这款延迟加载插件，会通过你的滚动情况来加载你需要看的图片，然后它才会从后台请求下载图片，最后显示出来。通过这个插件，可以在需要显示图片的时候，才下载图片，从而可以减少服务器的压力，提高页面加载速度。
Lazy Load 插件原理
修改目标img元素的src属性为orginal属性，从而中断图片的加载。检测滚动状态，然后把网页可视区域中的img的src属性还原然后加载图片，从而制造了一种缓冲加载的效果。代码引入方法：
复制代码 代码如下:
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/grey.gif", //加载图片前的占位图片
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script>
但是现在，很多Javascript大牛分析得出，这个插件其实并没有真正的起到缓加载的作用。确实是这样，官方也已经给出了说明和解决方法了。
其实原因就在于在新版的浏览器中，即使我们删除了Javascript控制的src属性，浏览器仍然会去加载这个图像。
那么我们该怎么解决呢？其实也很简单，需要直接修改HTML的结构，在img标签中添加新的属性，把src属性的值指向占位图片，添加data-original属性，让其指向真正的图像地址。比如：
复制代码 代码如下:
<img src="https://www.jb51.net/img/grey.gif" data-original="https://www.jb51.net/img/example.jpg" >
当然，在上面的代码中我们把页面内的所有图片都延迟加载了，但有些时候我们并不希望这样，因为有些图片并不想然他们延迟加载，那么我们可以这样只需做：
如只缓冲加载类main下的图像
复制代码 代码如下:
$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
加载挂载有lazy类的图像：
复制代码 代码如下:
$("img.lazy").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
其他的以此类推，适当做一下选择器调整就行了。
lazyload.js 高级使用方法：
下面部分来自官方文档，将官方文档进行了一下简单的翻译。
更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。
应对这个问题，我们需要引入noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。
复制代码 代码如下:
<img src="https://www.jb51.net/img/grey.gif" data-original="https://www.jb51.net/img/example.jpg" heigh="480">
<noscript><img src="https://www.jb51.net/img/example.jpg" heigh="480"></noscript>
对现有图像，隐藏处理，使用 show()方法触发显示。
复制代码 代码如下:
.lazy {
display: none;
}
这样，如果浏览器不支持 Javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下：
复制代码 代码如下:
$("img.lazy").show().lazyload();
提前加载
默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。
复制代码 代码如下:
$("img.lazy").lazyload({
threshold : 200
});
threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。
自定义触发事件