IntersectionObserver API 创建图片懒加载(实战)

最新推荐文章于 2025-06-17 14:35:51 发布

Kinghiee

最新推荐文章于 2025-06-17 14:35:51 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： vue ts 文章标签： intersection 图片懒加载

CC BY-NC-ND 4.0

本文链接：https://blog.csdn.net/qq_42683219/article/details/123312355

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了如何使用 Vue.js 实现一个图片懒加载组件，通过 Intersection Observer API 监听元素进入视口时动态替换 src 属性，提高页面性能。关键点包括模板结构、TypeScript编写、以及使用 Intersection Observer 错误处理和交互监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

在这里插入图片描述

二、代码

<template>
  <img
    ref="imgLazy"
    :data-src="dataSrc"
    :src="src"
    :alt="alt"
    :title="title"
    class="kh-img-lazy"
    @error="imgErrorHandle"
  >
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';

export default defineComponent({
  name: 'KhImgLazy',
  props: {
    dataSrc: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: 'img'
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup() {
    const IMG_LAZY = reactive({
      error: require('@client/assets/imgs/common/kh_error.webp'),
      src: require('@client/assets/imgs/common/kh_loading.webp'),
      io: ref<any>(null),
    })

    return {
      ...toRefs(IMG_LAZY)
    }
  },
  watch: {
    dataSrc: {
      deep: true,
      handler: function() {
        this.listenIntersection();
      }
    }
  },
  mounted() {
    this.listenIntersection();
  },
  methods: {

    /**
     * @description imgErrorHandle img 错误处理函数
     * @returns { void }
     */
    imgErrorHandle(): void {
      this.src = this.error; // img error
    },

    /**
     * @description listenIntersection 监听交互事件
     * @returns { void }
     */
    listenIntersection(): void {
      this.io = new IntersectionObserver((entries) => {
        entries.forEach((val) => {
          if (val && val.isIntersecting && val.target) {
            this.src = this.dataSrc; // 赋值img src属性

            // 取消监听
            this.io.unobserve(this.$refs.imgLazy as HTMLBaseElement);
            this.io = null;
          }
        })
      })

      // 监听 img
      this.io.observe(this.$refs.imgLazy as HTMLBaseElement)
    }
  }
});
</script>

<style lang="less" scoped>
/** define kh-img-lazy */
.kh-img-lazy {
  width: auto;
  max-width: 100%;
}
</style>