vue-lazyload 的使用（vue图片懒加载）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

github地址：https://github.com/hilongjw/vue-lazyload

npm i vue-lazyload -S

或者

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

<script>

  Vue.use(VueLazyload)

  ...

</script>

用法：（更多选项见github文档）

import Vue from 'vue'

import App from './App.vue'

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

})

new Vue({

  el: 'body',

  components: {

    App

  }

})

图片懒加载：

<ul>

  <li v-for="img in list">

    <img v-lazy="img.src" >

  </li>

</ul>

<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>

<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>