在HTML中，图片懒加载是一种性能优化技术，它可以提升网页的加载速度。原理是将图片的加载延迟到用户真正需要看到图片的时候再加载，而不是在网页加载完毕后就立即加载所有图片。这样做的好处是减少了网页加载时的带宽占用，提升了用户体验。

Vue2图片懒加载

使用 vue-lazyload 插件来实现 Vue 中的图片懒加载非常简单，只需要简单的几步即可实现。

首先，你需要在项目中安装 vue-lazyload[1] 插件。

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 rc="placeholderUrl" ata-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 rc="placeholderUrl" ata-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[2]这个插件。

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

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(),
})

参考资料

[1]vue-lazyload: https://www.npmjs.com/package/vue-lazyload

[2]vue3-lazyload: https://www.npmjs.com/package/vue3-lazyload

往期回顾

◆JS复制Object对象的几种方式以及性能对比

◆修复Element等框架二次确认点击过快导致多次情况问题

◆用ChatGPT打造个人创业赚钱新奇兵器

版权声明：本文为「诚哥博客」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://www.chengzz.com/924.html