xiao-ling-zi

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。

1. 安装插件:

npm install vue-lazyload --save-dev

2. main.js引入插件:


import VueLazyload from \'vue-lazyload\'  //引入这个懒加载插件

 Vue.use(VueLazyLoad,{
  preLoad: 1.0, //图片 设置显示比例,默认为1.3
  error:require(\'./assets/img/weixin_error.jpg\'),  //加载失败的显示
  loading: require(\'./assets/img/logo.png\'),       //加载中的显示
  attempt: 1
 })

配置图片位置这里,通过常用的路径配置找不到图片,所以我用的是require

具体的配置使用可以参考:

https://www.npmjs.com/package/vue-lazyload

3.在组件任何地方都可以直接使用把 img 里的:src -> v-lazy

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

注意>>>  :key=""  必须要加,否则就会出现,页面刷新,其他内容都刷新了,但是只有图片不刷新的情况

分类:

技术点:

相关文章:

  • 2021-11-27
  • 2022-01-09
  • 2021-06-08
  • 2022-12-23
  • 2021-11-27
  • 2021-11-27
  • 2022-12-23
  • 2021-11-27
猜你喜欢
  • 2021-08-13
  • 2021-11-27
  • 2021-11-27
  • 2022-12-23
  • 2021-11-27
  • 2021-11-27
相关资源
相似解决方案