uni-app 高性能的图片懒加载组件

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 高性能的图片懒加载组件

高性能的图片懒加载组件
1 回复

在uni-app中实现高性能的图片懒加载组件,可以利用IntersectionObserver API来检测图片是否进入视口,从而实现懒加载。以下是一个简单的代码案例,展示了如何创建一个高性能的图片懒加载组件。

首先,创建一个名为LazyLoadImage.vue的组件:

<template>
  <view class="lazy-load-container">
    <image v-if="isIntersecting" :src="src" class="lazy-load-image" @load="onLoad"></image>
    <image v-else class="placeholder" @load="onLoadPlaceholder"></image>
  </view>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isIntersecting: false,
      observer: null
    };
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      if (entry.isIntersecting) {
        this.isIntersecting = true;
        this.observer.unobserve(this.$el.querySelector('.lazy-load-container'));
      }
    }, {
      root: null, // null means viewport
      threshold: 0.1 // 10% of the element's height
    });
    this.observer.observe(this.$el.querySelector('.lazy-load-container'));
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    onLoad() {
      // Handle image load event if needed
    },
    onLoadPlaceholder() {
      // Handle placeholder image load event if needed
    }
  }
};
</script>

<style scoped>
.lazy-load-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.lazy-load-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* Placeholder background */
}
</style>

在父组件中使用该懒加载图片组件:

<template>
  <view>
    <LazyLoadImage src="https://example.com/image.jpg" placeholder="https://example.com/placeholder.jpg"></LazyLoadImage>
  </view>
</template>

<script>
import LazyLoadImage from '@/components/LazyLoadImage.vue';

export default {
  components: {
    LazyLoadImage
  }
};
</script>

上述代码展示了如何在uni-app中实现一个高性能的图片懒加载组件。IntersectionObserver API用于检测图片是否进入视口,从而动态加载真实图片。通过监听图片的加载事件,你可以进一步处理加载完成后的逻辑。这种方式相比传统滚动事件监听更高效,因为它减少了不必要的DOM操作和重绘。

回到顶部