v-lazy-image

一个 Vue.js 组件，使用 Intersection Observer API 自动在图片进入视口时实现延迟加载。

💡 想了解实际项目和企业级项目的应用以及如何通过响应式图片和渐进式加载达到最佳性能，请查看 实践示例和演示。

使用方法

npm install v-lazy-image

警告： 如果你针对不支持该功能的浏览器，需要安装 w3c Intersection Observer 的 polyfill。

对于 Vue 3，导入并像其他组件一样使用它：

<script setup>
  import VLazyImage from "v-lazy-image";
</script>

对于 Vue 2，从 v-lazy-image/v2 导入：

import VLazyImage from "v-lazy-image/v2";

export default {
  components: {
    VLazyImage
  }
};

你需要传递一个 src 属性来指定图片链接：

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

如此简单，图片将在进入视口时被加载。你可以**在此演示中查看其运行效果**，并学习如何使用 Chrome DevTools 查看加载过程。

达到最佳性能

仅仅使用 v-lazy-image 就可以提升性能，因为它会在图片即将可见时才加载。

但你可以进一步优化，通过以下技术榨取网站性能。

响应式图片

v-lazy-image 支持 Web 标准的图片 srcset 属性和 <picture> 标签。

阅读 "使用 v-lazy-image 实现响应式图片" 以了解其简洁性，并在一个演示中看到实际效果。

渐进式图像加载

Spotify、Netflix 和 Medium 等平台采用的技术，用于提高感知性能和用户体验。

在 "使用 v-lazy-image 加载图片达到最佳性能" 中，你将了解什么是渐进式图像加载，如何利用 src-placeholder 属性在 v-lazy-image 中实现它，还有一个包含 CSS 动画的演示。

API

除了以下 API，你可以传递任何 <img> 标签属性，如 alt，它们将添加到渲染后的 <img> 标签中。

带星号 (*) 的字段是必需的。

属性

名称	类型	默认值	描述
src	String *	-	图片的 src，在与视口相交时延迟加载。
src-placeholder	String	' '	如果定义，则在 src 图片加载前显示。适用于渐进式图像加载，见演示
srcset	String	-	用于不同分辨率的图像。
intersection-options	Object	() => ({})	Intersection Observer 配置对象
use-picture	Boolean	false	是否将 img 包裹在 picture 标签内。

事件

名称	描述
intersect	当图片与视口相交时触发
load	当 src 中定义的懒加载图片加载完成时触发
error	当 src 中定义的懒加载图片加载失败时触发