Vue中实现图片懒加载
Vue中实现图片懒加载
首先我们在写页面的时候要考虑到优化的时候，这样我们在页面图片特别多的情况下要渲染图片的时候，如果网络不是特别好，图片加载不出来，会导致图片那一块是空白的，这样的用户体验是特别不好的
所以就有了图片懒加载
那我们在vue的脚手架里面怎么使用图片懒加载呢？
我们可以使用vue的vue-lazyload插件
话不多说上代码！
- 首先我们需要先安装插件
npm install vue-lazyload --save
或者可以使用yarn
yarn add vue-lazyload --save
- 在main.js里引入
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中写的
写完之后我们引用的时候就是
![]()
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！