图片懒加载(jquery与vue两种)

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

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

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

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

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

属性默认值描述备注

属性默认值描述备注

---

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

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

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

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

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

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

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

参数选项说明

参数选项说明