vue-lazyload 图片懒加载的使用

vue-lazyload 图片懒加载插件库

• 官网地址

• 基础使用

  • 安装

    $ npm i vue-lazyload -S
    

  • main .js 中引入

    import Vue from 'vue'
    import App from './App.vue'
    import VueLazyload from 'vue-lazyload' // 引入
     
    // 1. 基础使用
    Vue.use(VueLazyload)
    
    // 2. 带配置选项使用
    Vue.use(VueLazyload, {
      preLoad: 1.3,   // 预加载高度
      error: require('./assets/logo.png'),  // 真实图片加载出错是替代图片
      loading: require('./assets/logo.png'), // 真实图片加载之前的一个替代图片
      attempt: 1   // 尝试加载真实图片的次数
    })
    
    // 注意：error、loading 引入图片时，如果是 src 中的图片地址，需要用 require 引入
    

  • 使用图片懒加载

    // 在 img 标签上使用图片懒加载
    <img v-lazy="item.url" />   // 将 :src 换成 v-lazy
        
    // 背景图片懒加载
    <div v-lazy:background-image="imgUrl"></div>