vue中实现图片懒加载之vue-lazyload
前言
通常在一些大型网站中可以看到图片都是根据你的可视窗口去慢加载,这一般都是当你滚动到这张图片时才会加载出来给你显示。这样做的好处大家应该都知道,如果比如是一个图片网站,直接一次性给你加载全部图片,在数据量大的情况下,就会导致这个网站速度很慢,说不定也会导致你的浏览器崩溃哦。所以这些网站都会用到懒加载。然后在vue中我们可以使用vue-lazyload插件来实现此功能
安装
使用以下命令安装插件
npm i vue-lazyload@1.2.3 -S
这里使用低版本的,最新版本我使用后发现没效果。
main.js全局引入
import VueLazyLoad from 'vue-lazyload'
// 2.注册插件
Vue.use(VueLazyLoad, {
preLoad: 1,
// 懒加载默认加载图片
loading: 'http://img.shiyit.com/img-loading.png',
// 加载失败后加载的图片
error: 'http://img.shiyit.com/img-loading-error.png',
attempt: 1
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
// listenEvents: [ 'scroll' ]
})
img标签使用
<img v-lazy="url" :key="url">
这里的url为你的图片地址URL
测试
至此懒加载效果就已经实现了,效果如下图:
2401_84183802: 写的很好,细节很到位!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
CSDN-Ada助手: 恭喜您撰写第20篇博客!能够分享关于Linux使用宝塔部署jar的经验,对读者们无疑是一大帮助。希望您能继续保持创作的热情和努力,分享更多有价值的内容给大家。下一步可以考虑探讨一些高级技巧或者深入的主题,让读者们收益更多。期待您更多的精彩文章!
CSDN-Ada助手: 恭喜用户发布了新的博客文章!《Vue3中常用的一些方法使用手册》这个主题对于Vue开发者来说肯定非常有用。希望用户能够继续分享更多关于Vue3的实用技巧和经验,让更多的人受益。也建议用户可以考虑深入探讨Vue3中一些高级特性或者与其他前端框架的比较,这样可能会给读者带来更多的启发和帮助。期待用户的下一篇作品!
CSDN-Ada助手: 恭喜您撰写了第18篇博客!看到您分享如何通过宝塔面板部署vue项目到服务器上的经验,让我受益匪浅。希望您能继续保持创作的热情,分享更多有价值的内容。或许下一步可以考虑深入探讨如何优化vue项目的性能或者介绍一些实用的前端开发工具,期待您的精彩文章!
HaddopRookie: 建了索引没使用,使用强制索引生效了,啥情况呢