vue2实现图片懒加载

105 阅读1分钟

实现思路: 使用IntersectionObserver这个API,IntersectionObserver用于在浏览器中观察元素的可见性和位置变化。它可以帮助开发者实现一些动态行为,如图片的懒加载、无限滚动等。 设置img标签但是不给src赋值,而是自定义属性data_url,赋值为其图片路径。当图片进入可视区域后,将图片的src赋值为data_url的值

vue2代码参考:code.juejin.cn/api/raw/728…
vue3的实现可以参考该链接:juejin.cn/post/727934…