Vue怎么做图片懒加载？

颜辞镜花辞树_:
我记得有个插件直接可以把src换成v-lazy就是图片的懒加载了

爱失眠的NEO:
<img src="" loading="lazy" decoding="async" /> 这俩原生属性了解下

【回复】不考虑兼容还是很好用的
程序员少北晨:
代码全部在这里，可以根据视频里的文件名找到你想要的。 https://github.com/shaobeichen/shaobeichen.github.io

不懂事的创可贴:
star啦。有个小问题，这样做是设置每张图片进入视口时加载，但是期望的懒加载应该是除了加载视口内的图片之外，还会额外加载该图片下面几张图片，每次额外多加载几张，页面滚动的时候就不会因为图片加载耗时而影响用户体验。

【回复】回复 @不懂事的创可贴 :IntersectionObserver有个参数叫rootMargin，可以配置距离多远的时候被触发
【回复】回复 @少北晨 :我设置400px咋不生效[笑哭]
【回复】回复 @少北晨 :懂了，感谢！
就是现在t:
讲的很细，加油，有精力的话建议搞个系列视频[打call]

DJI大彊行业应用:
讲的很好，下次背景音乐再小点就更好了

木子さんヽ:
“劳斯莱斯怎么上坡起步”，“奔驰怎么侧方位停车”。 懒加载跟vue有什么关系？问这种问题的也就那水平，要不就是伸手党，你这视频也就只能给那些人看了

爱动漫_爱前端:
图片出了视口再进入视口岂不是会再次加载

【回复】可以做个进入视口取消监听
【回复】只要加载了我们就取消监听，没有仔细看哦[脱单doge]
【回复】所以你看到unobserve了吗[doge]
药有中二病:
喜欢这种短视频 刷到就是学到[脱单doge]

火星上的孤独患者:
不多说，宝藏up主，都给我看，直接三连[给心心]

黑字典:
基本都懂 组合在一起就看不懂了[笑哭]

【回复】好我在研究下怎么简化下讲解的流程
【回复】回复 @少北晨 : 看了两遍感觉半懂不懂的。在去看别人的视频，他是带着敲了一遍，一下子就懂了。可能对于我这种初学者只讲代码理解有一点吃力。要是up边敲代码边讲解就好了，虽然讲解得也不错
【回复】回复 @这人世间 : 如果一边敲一边写可能会导致视频时长太长了，后面会组织直播和打卡学习，感兴趣可以私聊加粉丝群
时间反演ぇ:
对于知识的视频，都是先赞后看，已成习惯