Vue 懒加载图片组件

Vue 懒加载图片 是一个 Vue.js 组件，它使用 Intersection Observer API 在图片进入视窗时自动懒加载图片。

刚刚发布了 v-lazy-image v2.0！
✨ 支持 Vue 3 和 2
🚀 之前：2.74KB - 现在：1.55 KB
☢️ 具有单元测试和 E2E 测试

喜欢 @vite_js (由 @youyuxi 开发) 构建库时简单易用的方式。自己看看吧！ https://t.co/MrfQbVd23e

— Alex Jover Morales (@alexjoverm) 2021 年 8 月 23 日

使用 Vue 懒加载图片很方便，你不必从头开始构建懒加载图片加载器。

<template>
  <v-lazy-image src="http://lorempixel.com/400/200/" />
</template>

这是一个更复杂的示例，它展示了一些很棒的功能，比如 srcset

<v-lazy-image
    class="picture-demo"
    srcset="
        https://cdn-images-1.medium.com/max/400/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 400w,
        https://cdn-images-1.medium.com/max/800/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 800w
        https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 1600w
      "
    sizes="(max-width: 150px) 200px, 400px, 800p"
    src="https://cdn-images-1.medium.com/max/800/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    use-picture
/>

如上例所示，该包以简单易用的 API 提供了强大的功能。

• 支持 Vue 2 和 Vue 3
• 使用 Intersection Observer API 自动懒加载图片
• 使用 srcset 实现响应式图片
• 使用 src-placeholder 属性实现渐进式图片加载 (了解更多)
• 为 intersect、load 和 error 提供事件

你的应用也会立即看到性能提升，因为图片只会当它们滚动到可视区域时才会加载。

你可以在 GitHub 上了解有关该包的更多信息，获取完整的安装说明，并查看 源代码。该仓库包括 Vue 2 和 Vue 3 的游乐场，如果你想查看一些示例。