jQuery插件Lazy Load.js，是用来缓冲加载图片的。如果一个网页内容很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那 个图片的时候，它才会从请求下载图片，然后显示出来。应用了这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资 源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。

        Lazy Load 插件原理

        修改目标 img 的 src 属性为 orginal 属性，从而中断图片的加载。检测滚动状态，然后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效果。

但是现在，很多javascript大牛分析得出，这个插件其实并没有真正的缓加载效果。确实是这样，官方也已经给出了说明和解决方法了。

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

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

        例如：<img data-original=“img/example.jpg” src=“img/grey.gif”>

        这样就需要先分析一下插件的优缺点，再决定是否要使用。

        使用：

        1.必须按照这种结构才有实际作用，需要对输出进行定义。

        2.可以节约服务器资源，并且有较好的用户体验。

        3.如果图片很大，当用户滚动到目标位置，需要较长时间下载。

        不使用：

        1.增加服务器压力，浪费系统资源。

        究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一 个img 标签上自己加上这个属性，会稍微麻烦一点。jeson的好东西分享博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。

        开始使用 lazyload.js

        第一步：加载相关文件。

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

    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>

        第二步：定义图片结构。

        按照官方的建议，定义你的img结构：

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

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

        激活以下，你就可以在目标中使用了。

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

        lazyload.js 高级使用方法：

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

        更周全的做法

        大家不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。

        应对这个问题，我们需要引入noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。对现有图像，隐藏处理，使用 show()方法触发显示。这样，如果浏览器不支持 Javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下：

    <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
    <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
    <script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

        提前加载

        默认的情况是，当浏览器滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。

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

        threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。

        自定义触发事件