Vue中实现图片懒加载,Vue2、Vue3写法

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

image-20230106150536513

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(),
})
© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容