CP-VueDir

Appearance

v-lazyload ​

介绍 ​

v-lazyload 指令用于实现图片的懒加载功能。当图片进入视口（viewport）时才会加载实际图片，这可以提高页面的加载性能，特别是对于包含大量图片的长页面。

使用方法 ​

使用 v-lazyload 指令时，需要将图片的实际路径绑定到 data-src 属性上，当图片进入视口时，v-lazyload 指令会将 data-src 的值赋值给 src 属性，从而加载实际图片。

vue
<template>
  <img v-lazyload data-src="path/to/image.jpg" />
</template>

基础用法 ​

通过 v-lazyload 指令，你可以轻松地实现图片的懒加载功能，只需将图片的实际路径绑定到 data-src 属性上即可。

Lazy Image 1Lazy Image 2Lazy Image 3Lazy Image 4Lazy Image 5
查看代码
vue
<template>
  <div class="demo-container">
    <div class="image-container">
      <img
        v-for="(image, index) in images"
        :key="index"
        v-lazyload
        :data-src="image"
        :alt="`Lazy Image ${index + 1}`"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const images = [
  'https://picsum.photos/800/400?random=1',
  'https://picsum.photos/800/400?random=2',
  'https://picsum.photos/800/400?random=3',
  'https://picsum.photos/800/400?random=4',
  'https://picsum.photos/800/400?random=5'
]
</script>

<style scoped>
.demo-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.image-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background-color: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
}
</style>

扩展用法 ​

通过传递 value 参数，可以自定义图片的懒加载配置项，包括 threshold 和 rootMargin。

Lazy Image 1Lazy Image 2Lazy Image 3Lazy Image 4Lazy Image 5
查看代码
vue
<template>
  <div class="demo-container">
    <div class="image-container">
      <img
        v-for="(image, index) in images"
        :key="index"
        v-lazyload="{
          threshold: 0.5,
          rootMargin: '100px'
        }"
        :data-src="image"
        :alt="`Lazy Image ${index + 1}`"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const images = [
  'https://picsum.photos/800/400?random=6',
  'https://picsum.photos/800/400?random=7',
  'https://picsum.photos/800/400?random=8',
  'https://picsum.photos/800/400?random=9',
  'https://picsum.photos/800/400?random=10'
]
</script>

<style scoped>
.demo-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.image-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background-color: #f5f5f5;
}
</style>

链式传参 ​

v-lazyload支持链式传参，组合使用多个参数，实现更灵活的懒加载效果。

链式传参

链式传参
查看代码
vue
<template>
  <div class="demo-block">
    <div class="modifier-example">
      <h4>链式传参</h4>
      <img v-lazyload.threshold-0.5.rootMargin-300 data-src="https://picsum.photos/800/400?random=1" alt="链式传参" />
    </div>
  </div>
</template>

<script setup>
import { vLazyload } from '@cp-vuedir/core'
</script>

<style scoped>
.demo-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modifier-example {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.modifier-example h4 {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.modifier-example div {
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
}
</style>

API ​

属性名说明类型是否必选默认值
value
图片的懒加载配置项，不指定时，将使用默认配置。
Object
○
{}
threshold
图片进入视口的触发阈值，单位为像素。
Number
○
0
rootMargin
根元素的外边距，用于计算图片进入视口的触发阈值。
Number
○
0

注意事项 ​

注意

  • 当使用 v-lazyload 指令时，需要确保图片的实际路径已经绑定到 data-src 属性上并删除原有的src属性，否则无法实现懒加载效果。