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 时，你可能需要注意一些事项。

在使用 v-lazy 指令时，你应该在指令的参数中使用一个表达式，而不是一个字符串。如果你使用的是字符串，那么 vue-lazyload 将无法正常工作。
如果你使用 LazyLoad 组件，那么你应该在 img 标签中使用 data-src 属性来指定图片的真实 URL，而不是 src 属性。vue-lazyload 会监听 data-src 属性的变化，并自动将其替换为真实的 URL。
如果你希望在图片加载失败时显示一张备用图片，你可以使用 vue-lazyload 的 error 和 loading 选项。

例如：

<template>
  <LazyLoad :error="errorUrl" :loading="loadingUrl">
    <img :src="placeholderUrl" :data-src="imageUrl" />
  </LazyLoad>
</template>

<script>
import LazyLoad from "vue-lazyload";

export default {
  components: {
    LazyLoad,
  },
  data() {
    return {
      errorUrl: "https://example.com/error.jpg",
      loadingUrl: "https://example.com/loading.jpg",
      placeholderUrl: "https://example.com/placeholder.jpg",
      imageUrl: "https://example.com/image.jpg",
    };
  },
};
</script>

error 选项指定了加载失败时显示的图片 URL，loading 选项指定了图片正在加载时显示的图片 URL。

你也可以使用 vue-lazyload 的全局配置来设置这些选项。

import Vue from "vue";
import VueLazyLoad from "vue-lazyload";

Vue.use(VueLazyLoad, {
  error: "https://example.com/error.jpg",
  loading: "https://example.com/loading.jpg",
});

这样，所有使用 vue-lazyload 的图片都会使用 error 和 loading 选项指定的图片。你也可以在使用 LazyLoad 组件时单独为每张图片设置 error 和 loading 选项。

Vue3 图片懒加载

在 Vue3 中使用图片懒加载，您可以使用 vue3-lazyload 这个插件。

首先，您需要安装这个插件：

npm install vue3-lazyload

然后，在您的 Vue 应用程序的根级别注册插件：

import { createApp } from "vue";
import Lazyload from "vue3-lazyload";

const app = createApp({
  // ...
});

app.use(Lazyload);

接下来，您可以在模板中使用 v-lazy 指令来延迟加载图像：

<template>
  <img v-lazy="imageUrl" alt="Lazy-loaded image" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "https://example.com/image.jpg",
    };
  },
};
</script>

您还可以提供一些可选的选项，例如加载中的占位符图像和加载失败的占位符图像：

<template>
  <img
    v-lazy="imageUrl"
    alt="Lazy-loaded image"
    loading-src="https://example.com/loading.gif"
    error-src="https://example.com/error.jpg" />
</template>

请注意，这个插件只能在 Vue3 中使用。

vue3-lazyload 的全局配置

import VueLazyLoad from "vue3-lazyload";
import { requireErrorImg } from "@/utils";
app.use(VueLazyLoad, {
  error: requireErrorImg(),
});

Vue2 图片懒加载#

Vue3 图片懒加载#

Vue2 图片懒加载

Vue3 图片懒加载