我们在浏览图片量非常大的页面时，像淘宝商城商品展示、必应图片搜索这类网站，图片的加载非常流畅，其中就应用了图片延迟加载技术。本文讲解Lazyload图片加载插件，当我们打开页面时，首先在屏幕可视区域加载完图片，随着向下滚动页面，图片会陆续加载，从而提升了页面打开速度。

Lazyload是一款基于jQuery的插件，在要显示大量图片的页面，图片是按需加载的，只在浏览器可视区内加载图片，当用户使用滚动条下拉时，后面的图片才会继续加载，从某种意义上讲，这种技术减少了服务器的负载。

XHTML

首先载入jquery库和lazyload插件：

在body中需要放置图片的区域放置多个要显示的图片。图片越多效果越明显。

注意，每张图片的src属性对应的是一张预定义的图片，就是再真正的图片还没加载的时候的替代图片，我们通常使用1x1的blank.gif图片。真正的图片是由属性data-original指定的，然后还需要设置图片的宽度和高度。

jQuery

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

和许多插件使用一样，只需要在元素上调用lazyload()即可，现在你就可以看到效果了。Lazyload同样提供了多个参数可设置不同的效果。

threshold：灵敏度，即可以通过设置灵敏度来控制图片的加载，如设置为200，即200像素前加载图片，默认为0，即到达图片边界时才加载。

event：绑定事件，即可以通过绑定click、mouseover或者任意自定义事件来触发图片的加载。默认是当用户滚动到图片窗口时触发图片加载。

effect：设置效果，即可以设置图片加载时的特效，如fadeIn，默认是show。