[JavaScript知识库]vue图片的懒加载vue-lazyload的使用

1.安装npm install vue-lazyload --save
2.导入到main.js
3.注册到Vue.use（VueLazyload）
4.修改img的src=>v-lazy

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from "vue-lazyload";

Vue.config.productionTip = false
//懒加载的插件
Vue.use(VueLazyload)

new Vue({
  render: h => h(App),
}).$mount('#app')

修改src为v-lazy

<img v-lazy="图片地址" :key="图片地址">

占位图片

Vue.use(VueLazyload,{
  loading: import('./assets/img/common/placeholder.png')
})

使用总结：

img标签中使用懒加载：v-lazy 代替 v-bind:src ；
背景图片中使用懒加载：v-lazy:background-image = “” ==>>注意图片和盒子大小问题，否则显示可能有问题哦。
使用时最好给一个 key 属性
:key="" 必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新。