Vue中实现图片懒加载，Vue2、Vue3写法
在 HTML 中，图片懒加载是一种性能优化技术，它可以提升网页的加载速度。原理是将图片的加载延迟到用户真正需要看到图片的时候再加载，而不是在网页加载完毕后就立即加载所有图片。这样做的好处是减少了网页加载时的带宽占用，提升了用户体验。 Vue2 图片懒加载 使用 vue-lazyload 插件来实现 Vue 中的图片懒加载非常简单，只需要简单的几步即可实现。 首先，你需要在项目中安装 vue-lazyload 插件。 npm install vue-lazyload 然后，在你的 Vue 项目的入口文件（例如 main.js）中引入 vue-lazyload 并注册。 import Vue from "vue"; import VueLazyLoad from "vue-lazyload"; Vue.use(VueLazyLoad); 接下来，你就可以在你的组件中使用 v-lazy 指令来实现图片懒加载了。 <template> <img v-lazy="imageUrl" /> </template> <script> export default { data() { return { imageUrl: "https://example.com/image.jpg", }; }, }; </script> v-lazy 指令接受一个表达式作为参数，这个表达式应该返回一个图片的 URL。当图片进入可视区域时，vue-lazyload 会自动将图片的 src 属性替换为图片的真实 URL，从而实现图片懒加载的效果。 除了 v-lazy 指令，你还可以使用 LazyLoad 组件来实现图片懒加载。 <template> <LazyLoad> <img :src="placeholderUrl" :data-src="imageUrl" /> </LazyLoad> </template> <script> import LazyLoad from "vue-lazyload"; export default { components: { LazyLoad, }, data() { return { placeholderUrl: "https://example.com/placeholder.jpg", imageUrl: "https://example.com/image.jpg", }; }, }; </script> 在使用 vue-lazyload 时，你可能需要注意一些事项。 ...