vue-lazyload 图片懒加载

图片懒加载只有在使用到图片时才会加载。可以提高浏览器的性能

使用

npm install vue-lazyload

vue项目中

main文件

import vueLazyload from 'vue-lazyload'

import vue from 'vue'

vue.use(vueLazyload) // 注册插件

组件中

<img v-lazy="require('./assets/iconall.png')"/>

在这里我使用了require 引入方式 因为 插件是在main中引入的， 而vue只会对src里面的文件进行编译，导致图片路径发生改变，从而vuelazyload 无法获取到正确的路径，所以使用了require方式引入图片。

在注册组件时，设置配置项

vue.use(vueLazyload,{error:'图片路径',loading:‘图片路径’ })

error 是图片获取失败时展示的拖

loading 是加载中展示的图片。

我们在组件中还可以对一些标签单独设置

<!-- <div v-lazy-container="{selector:'img',loading:require('./assets/logo.png')}">

<img :data-src='require("./assets/index.png")' alt="1" class="ab">

</div> -->

selector 就是选择器， 里面的 img代表的是 img标签。

然后还有好多配置项，我感觉都用不上，所以也没有一一列出来。

如果有补充的，可以在评论下留言。