前端vue之图片懒加载vue-lazyload

图片懒加载含义：就是在服务器返回图片之前显示的图片
网址

1. 下载 vue-lazyload

npm i vue-lazyload -S

2. main.js

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

3. .vue组件中使用

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

4. 原始html中使用

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

5. html中自定义错误和加载占位符图像

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

自我理解：在vue中也可以使用在html中的格式 只需要<img data-src="//domain.com/img1.jpg">改成
<img :data-src="//domain.com/img1.jpg">