Vue中实现图片懒加载

最新推荐文章于 2024-05-30 09:09:37 发布

就是不健身

最新推荐文章于 2024-05-30 09:09:37 发布

阅读量1k

点赞数 2

文章标签： vue 图片懒加载

本文链接：https://blog.csdn.net/qq_28506525/article/details/103481588

版权

首先我们在写页面的时候要考虑到优化的时候，这样我们在页面图片特别多的情况下要渲染图片的时候，如果网络不是特别好，图片加载不出来，会导致图片那一块是空白的，这样的用户体验是特别不好的
所以就有了图片懒加载

那我们在vue的脚手架里面怎么使用图片懒加载呢？
我们可以使用vue的vue-lazyload插件
话不多说上代码！

npm install vue-lazyload --save

或者可以使用yarn

yarn add vue-lazyload --save

import VueLazyload from 'vue-lazyload'

这里我们可以直接使用

Vue.use(VueLazyload)

或者可以使用自定义

Vue.use(VueLazyload, {
  preLoad: 1.3,//页面预加载
  error: 'dist/error.jpg',//加载失败图片
  loading: 'dist/loading.gif',//加载中的图片
  attempt: 1//尝试计数
})

这些都是在main.js中写的

写完之后我们引用的时候就是

<img v-lazy="引入的图片路径" alt=""/>

关注