Vue延迟加载图像的模块– Vue-Lazyload

Vue延迟加载图像的模块– Vue-Lazyload
插件名称 Vue-Lazyload
版本号 v1.3.4
发布时间 2020年9月8日
插件作者 hilongjw

Vue-Lazyload是一种轻巧且易于使用的Vue 1.x / 2.x模块,用于在应用程序中延迟加载图像。

变更日志:

02/19/2021

  • v1.3.4:错误修正

06/05/2018

  • v1.2.4:修复:在IE10,9中使用“数据集”

安装和下载:

$ npm install vue-lazyload --save

使用:

main.js:

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>

使用v-lazy-container与原始的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>

自定义errorloading占位符图像

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