下面部门来自官方文档，将官方文档进行了一下简单的翻译。

Lazy Load这个jQuery插件，是用来缓冲加载图片的插件。如不美观一篇文章很长有良多图片的话，下载图片就需要良多时刻。而这款插件，会检测你的滚动情形，只有你要看到阿谁图片的时辰，它才会年夜后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时辰，才下载图片，所以可以削减处事器的压力，避免不需要的资本下载。如不美观一小我不看下面的图片，那加载下面的图片就是一种华侈。

Lazy Load 插件事理

把图像插入某个容器

改削方针 img 的 src 属性为 orginal 属性，年夜而间断图片的加载。检测滚动状况，然后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效不美观。

可是此刻，良多javascript年夜牛剖析得出，这个插件其实并没有真正的缓加载效不美观。确实是这样，官方也已经给出了声名息争决体例了。

问题原因：在新版的浏览器中，即使你删除了 Javascript 节制的 src 属性，浏览器仍然会去加载这个图像。

例如：<img data-original=“img/example.jpg” src=http://www.zhuojie.net/?/web/2012/0831/“img/grey.gif”>

这样我们就需要先剖析一下插件的优错误谬误，再抉择是否要使用。

使用：

2.可以节约处事器资本，而且有较好的用户体验。

3.如不美观图片很年夜，当用户滚动到方针位置，需要较长时刻下载。

1.增添处事器压力，华侈系统资本。

lazyload.js 高级使用体例：

不使用：

自界说触发事务

作者：潜行者m

第一步：加载相关文件。

更周全的做法

很较着，你要加载jquery和这个插件。你可以使用以下代码，加载这几个文件：

<script src="http://www.zhuojie.net/?/web/2012/0831/jquery.js" type="text/javascript"></script>
<script src="http://www.zhuojie.net/?/web/2012/0831/jquery.lazyload.js" type="text/javascript"></script>

按照官方的建议，界说你的img结构：

<img src="/userfiles/Auto/20121226grey.gif" data-original="img/example.jpg" width="640" heigh="480">

第二步：界说图片结构。

提前加载

第三步：触发这个插件，生效。

1.必需按照这种结构才有现实浸染，需要对输出进行界说。

激活以下，你就可以在方针中使用了。

$("img.lazy").lazyload();

我们不得不思虑这样一个问题。我们界说了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如不美观用户的浏览器不撑持或者用户关失踪了撑持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如不美观没有 Javascript 的撑持，我们的图像就无法显示出来。

应对这个问题，我们需要惹人noscript 标签。年夜体思绪如下：用 noscript 包含真实的图像位置，当浏览器不撑持 Javascript，直接显示图像。对现有图像，潜匿措置，使用 show()体例触发显示。这样，如不美观浏览器不撑持 Javascript，我们自界说的 img 就不会呈现，而显示 noscript 琅缦沔的图像。具体实现代码如下：

<img src="/userfiles/Auto/20121226grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="/userfiles/Auto/20121226example.jpg" width="640" heigh="480"></noscript>

默认的情形是，当你滚动到图片位置的时辰，插件起头加载。这样，用户可能首先看到的是一个空白图像，然后再迟缓呈现。如不美观你想在用户滚动之前，提前加载这个图像，你可以设置装备摆设一下参数。

$("img.lazy").lazyload({ threshold : 200 });

threshold 这个参数，就是用来提前加载的。膳缦沔这个语句的意思是，当距离图片还有200像素的时辰，就瞥绶加载图片。

fadeIn的效不美观就是，改变图片的透明度，渐现的体例呈现。效不美观： effect demo page

起头使用 lazyload.js

自界说显示效不美观

默认的图片实现效不美观，就是没有用不美观，下载完成之后，直接显示出来。这样的用户体验并欠好，你可以设置 effect 属性，来节制显示图片的效不美观。例如

$("img.lazy").lazyload({ effect : "fadeIn" });

解决体例：直接改削 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。

巨匠如不美观使用智妙手机的话，经常饶暌功用网站下载应用，他们凡是使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css界嗣魅这个容器，然后用这个插件进行加载。效不美观：vertical

#container { height: 600px; overflow: scroll; }

$("img.lazy").lazyload({        

默认的触发事务，是滚动，当你滚动的时辰，就会搜检然后加载。你可以使用event属性，设置你自己的加载事务，之后你可以自界说触发这个事务的前提，然后去加载图像。

$("img.lazy").lazyload({ event : "click" });

     container: $("#container")
});

加载不成见图像

有部门图像是不成见的，我们对其加上近似 display：none 等属性的图像。默认的情形下，这个插件是不会加载潜匿的不成见图像。如不美观我们需要用它加载不成见图像，我们需要将 skip_invisible 设置为 false

$("img.lazy").lazyload({ skip_invisible : false });

事实使用不使用，仍是要看你自己的现实需求。如不美观你图片斗劲少，就不必使用了，如不美观你图片斗劲多，可以考虑一下。可是，使用的话，你可能需要把每一 个img 标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不外没用使用官方说的那种结构，要的只是一个缓冲加载的效不美观。

文章来历：我爱水煮鱼，转载请注明出处。