vue项目添加个全局的图片懒加载(vue-lazyload)

时间:2019-08-21
本文章向大家介绍vue项目添加个全局的图片懒加载(vue-lazyload),主要包括vue项目添加个全局的图片懒加载(vue-lazyload)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

npm:

npm i vue-lazyload -S

main.js:

import VueLazyload from 'vue-lazyload'


Vue.use(VueLazyload,{
    preLoad:0.5,
    //loading:require('./assets/loading.gif'),
    loading:'',
    attempt:2,
    listenEvents:['scroll'],
    filter: {
        index(listener, opts) {
            if (location.href.indexOf('index')>-1) {
                opts.ListenEvents = ['touchmove']        
            }
         }
    },
    observer: true,
    observerOptions:{ 
        rootMargin: '0px', 
        threshold: 0.1 ,
    }
})

正常使用:

<img v-lazy="imgUrl" />

可是当你想自定义每个图片的loading效果的时候就不行了,翻看了几遍官网才发现有可以解决的方法

<script>
export default {
  data () {
    return {
      imgObj: {
        src: 'http://xx.com/logo.png',
        error: 'http://xx.com/error.png',
        loading: 'http://xx.com/loading-spin.svg'
      },
      imgUrl: 'http://xx.com/logo.png' // String
    }
  }
}
</script> 
 
<template>
  <div ref="container">
     <img v-lazy="imgUrl"/>
     <div v-lazy:background-image="imgUrl"></div>
 
     <!-- with customer error and loading -->
     <img v-lazy="imgObj"/>
     <div v-lazy:background-image="imgObj"></div>
 
     <!-- Customer scrollable element -->
     <img v-lazy.container ="imgUrl"/>
     <div v-lazy:background-image.container="img"></div>
 
    <!-- srcset -->
    <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
    <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
  </div>
</template>

重点是下面这句,他可以直接识别你对象里面的src、error、loading:

<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>

原文地址:https://www.cnblogs.com/chao202426/p/11389587.html