Vue.js 的渐进式图像延迟加载器 – v-lazy-image

Vue.js 的渐进式图像延迟加载器 – v-lazy-image
插件名称 v-lazy-image
发布时间 2021年8月24日
插件作者 alexjoverm

使用Intersection Observer API进入视口时自动延迟加载图像的 Vue.js 组件。

用法

npm install v-lazy-image

对于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>

Props

姓名类型默认说明
src字符串(*)——图像src与视口相交时延迟加载
src-placeholder字符串‘ ‘如果定义,它将一直显示,直到src加载图像。
用于渐进式图像加载,请参阅演示
srcset字符串——用于不同分辨率的图像
intersection-options对象() => ({})该路口观察选项对象。
use-picture布尔值假的将 img 包裹在图片标签中。

事件

姓名说明
intersect当图像与视口相交时触发
loadsrc加载定义的惰性图像时触发
error中定义的惰性图片src加载失败时触发