网页开发的时候，有时候一个网页中有大量的图片，或者是那种瀑布流不停的加载图片这个时候一次性加载所以图片不仅影响网页打开速度而且还会大量占用服务器宽带，同时也会影响用户的体验。所以我们可以通过jquery的lazyload这个插件对网页img中的图片进行异步加载，当用户翻到网页的图片附近的时候就会激活JS动作从而到服务器上请求图片下来再显示图片。


一；引入JQuery和lazyload插件
使用编辑器打开HTM文件，在文件的head后面引入两个js文件，具体代码如下：
<script src="http://cdn.320023.com/public/jquery/jquery-1.11.0.min.js"></script>
<script src=" http://cdn.320023.com/public/jquery.lazyload.js?v=1.9.1"></script>


二；添加Lazyload插件的JS配置调用代码
因为我们希望网页在加载完文字之后再做加载图片的动作，所以Lazyload也需要在整个网页加载完成后在执行，这里我们通过JS函数来加载。代码如下：
<script type="text/javascript" charset="utf-8">
$(function(){
  $(". nrjsload ").lazyload({effect: "fadeIn"});//图片异步加载
});
</script>
小技巧；如果你想对整个网页都直接进行图片异步加载可以直接采用img标签，不使用class类名来控制。代码如下：
$("img").lazyload({effect: "fadeIn"});//把所有img都通过lazyload异步加载


三；在img图片标签上添加JS类
完成上面的基础文件载入后，就可以在网页的所有img标签里面使用异步加载的类了，只要找到网页中有img标签的地方，并在标签中添加上面配置信息中的类名class=" nrjsload "即可让这个IMG表中的图片异步加载了。范例代码如下：

<img class=" nrjsload " data-original="img/nrjs-pic1.jpg">
<img class=" nrjsload " data-original="img/nrjs-pic2.jpg">
<img class=" nrjsload " data-original="img/nrjs-pic3.jpg">
<img class=" nrjsload " data-original="img/nrjs-pic4.jpg">
<img class=" nrjsload " data-original="img/nrjs-pic5.jpg">

四；Lazyload参数说明
event 'scroll' 用于触发图片的加载动作。
threshold 0 控制在距离图片什么距离时显示。默认为 0 表示当图片出现在显示区域中的立即加载显示；设为整数表示图片距离 x 像素进入显示区域时进行加载；设为负数表示图片进入显示区域 x 像素时进行加载。
effect 'show' 在显示图片的时候上的动画效果，备选参数有fadeIn, show, slideDown 等
container window 这个是父容器名称，延迟就是加载父容器里面的指定图片。
effectspeed undefined 显示图片动画时间。作为 effect 的参数使用：effect(effectspeed)
data_attribute 'original' 真实图片地址的 data 属性后缀
failure_limit 0 容差范围。页面滚动时，Lazy Load 会遍历延迟加载的图片，检查是否在显示区域内，默认找到第 1 张不可见的图片时，就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同，但是也可能会出现例外，通过该值来扩大容差范围。
load null 图片加载后的事件 (Function)，有 2 个参数，同 appear 。
skip_invisible true 跳过隐藏的图片。图片不可见时（如 display:none），不强制加载。
appear null 图片加载时的事件 (Function)，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload 的参数）。


总结
这个lazyload异步图片加载插件，使用还是比较广泛也比较好用，运行速度快。最关键的是这个插件的部署还是非常方便的，特别是要做全局异步加载图片的时候，直接把img标签定义成异步加载即可。