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 ,
    }
})

正常使用：

"imgUrl" />

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

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

"imgObj"/>
"imgObj">

 

转载于:https://www.cnblogs.com/chao202426/p/11389587.html