vue-lazyload懒加载

最近陷VUE这个坑出不去了，一直在更新vue的各种插件，原生都快不会写了，但是因为我懒，看到插件就走不动路...
废话不多说，看走心过程：

npm安装方法

npm install vue-lazyload

CDN安装方法

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

// or with options 也可以直接在这里设置参数
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //预加载的宽高比
  error: 'dist/error.png',//图片加载失败时使用的图片源
  loading: 'dist/loading.gif',//图片加载的路径
  attempt: 1//尝试加载次数
})

• 官方详解：

image.png

下面提供一个简单的demo：

html：

js:

css:

img[lazy=loading]{
    
}
img[lazy=loaded]{
  animation:fade 0.5s;
}
img{
  transition:all 0.5s;
  display: block;
  width: 400px;
  margin: 0 auto;
}

@keyframes fade {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.gototop{
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #f2f2f5;
    position: fixed;
    right: 30px;
    bottom: 50px;
    font-size: 12px;
    cursor: pointer;
}
.gototop a{
    color: #666;
    line-height: 20px;
    display: inline-block;
}

简单的图片懒加载就实现了。

demo项目已上传到github，demo包含vue-amap,vue-particle,vue-lazyload插件的简单使用：https://github.com/JOSIE1988/VueDemo