jQuery图片延迟加载插件jQuery.lazyload_jquery lazyload

首先引入所需的jquery和jquery.lazyload.js到你的页面

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
1
2

接下来就是在HTML中如何调用
定义标签img标签 图片路径引用方法用data-original

<img class="dandelioncloud" data-original="img/bmw_m1_hood.jpg">
<img class="dandelioncloud" data-original="img/bmw_m1_side.jpg">
<img class="dandelioncloud" data-original="img/viper_1.jpg">
<img class="dandelioncloud" data-original="img/viper_corner.jpg">
<img class="dandelioncloud" data-original="img/bmw_m3_gt.jpg">
<img class="dandelioncloud" data-original="img/corvette_pitstop.jpg">
1
2
3
4
5
6

然后使用js初始化lazyload并设置图片显示方式

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.dandelioncloud").lazyload({effect: "fadeIn"});
  });
</script>
1
2
3
4
5