在加载大量图片的时候，图片的懒加载对于用户体验有着很大的提升，一个是整体加载速度会相对较快，再者边浏览变加载的模式可以给手机端的用户节省流量的使用。

一、jquery的懒加载插件：lazyload.js (下载地址http://www.jq22.com/jquery-info390)

第一步：把jquery和lazyload下载并加载到页面

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

第二步：js出始化lazyload并设置图片显示方式（更多属性见下面的表格说明）

 <script type="text/javascript" >   
   $(function() {      
      $("img").lazyload();  //默认加载 ，show()    
      $("img"). lazyload({effect: "fadeIn"}); //图片显示方式，淡出效果，其他可自定义
      $("img"). lazyload({threshold :120}); // 提前加载，在图片距离屏幕120px时提前载入       
      $("img"). lazyload({ event : "click" }); // 事件加载， 当触发定义的事件时，图片才开始加载 
   });
 </script>

第三步：html图片调用方法，图片上需要加上自定义属性data-original，值即为图片的路径

 <img data-original="img/bmw_m1_hood.jpg">
 <img data-original="img/bmw_m1_side.jpg">
 <img data-original="img/viper_1.jpg">
 <img data-original="img/viper_corner.jpg">
 <img data-original="img/bmw_m3_gt.jpg">
 <img data-original="img/corvette_pitstop.jpg">

属性默认值描述备注

属性默认值描述备注

二：VUE的懒加载：vue-lazyload（Github链接：https://github.com/hilongjw/vue-lazyload）

其实这个下载地址里就有详细的使用说明及例子我下面就简单说一下使用方法吧

第一步：还是一样把下载并加载到页面（或者npm下载安装 $ npm install vue-lazyload -D)

 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

第二步： main.js中引入并配置参数

比较常用的参数是图片加载错误（error）和预加载时显示的图片（loading）

 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad,{
      error:'./static/error.png',    //图片路径错误时加载图片 
      loading:'./static/loading.png'   //预加载图片
 })

第三步：HTML中的使用把:src换成v-lazy即可

 <img v-lazy="item.imgurl" width="60" height="60"/>
 <script>  
 Vue.use(VueLazyload)
 </script>

参数选项说明

参数选项说明