UniApp 如何处理图片懒加载？

在 UniApp 中，图片懒加载是优化页面性能的重要手段之一，特别是在长列表或图片较多的场景中。通过懒加载，可以延迟加载非可视区域的图片，减少初始加载时间。以下是 UniApp 处理图片懒加载的常用方法：

一、使用 lazy-load 属性

UniApp 的 image 组件提供了 lazy-load 属性，支持图片懒加载。

1. 基本用法

• 示例：

  <template>
    <view>
      <image
        v-for="(item, index) in list"
        :key="index"
        :src="item.src"
        lazy-load
        mode="aspectFill"
        style="width: 100%; height: 200px;"
      ></image>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/image1.jpg' },
          { src: 'https://example.com/image2.jpg' },
          { src: 'https://example.com/image3.jpg' }
        ]
      };
    }
  };
  </script>
  

2. 注意事项

• lazy-load 属性仅在微信小程序和 H5 平台有效。
• 在 App 平台，lazy-load 属性无效，需要手动实现懒加载。

二、手动实现图片懒加载

对于不支持 lazy-load 属性的平台（如 App），可以通过监听滚动事件手动实现图片懒加载。

1. 监听滚动事件

• 示例：

  <template>
    <scroll-view scroll-y style="height: 100vh;" @scroll="onScroll">
      <view v-for="(item, index) in list" :key="index" class="item">
        <image
          v-if="item.visible"
          :src="item.src"
          mode="aspectFill"
          style="width: 100%; height: 200px;"
        ></image>
      </view>
    </scroll-view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/image1.jpg', visible: false },
          { src: 'https://example.com/image2.jpg', visible: false },
          { src: 'https://example.com/image3.jpg', visible: false }
        ]
      };
    },
    methods: {
      onScroll(e) {
        const scrollTop = e.detail.scrollTop;
        const windowHeight = uni.getSystemInfoSync().windowHeight;
        this.list.forEach((item, index) => {
          const itemTop = index * 200; // 每个图片的高度为 200px
          if (itemTop < scrollTop   windowHeight && itemTop   200 > scrollTop) {
            item.visible = true;
          }
        });
      }
    }
  };
  </script>
  

2. 优化性能

• 使用 IntersectionObserver API 实现更高效的懒加载。
• 示例：

  <template>
    <view>
      <view v-for="(item, index) in list" :key="index" class="item">
        <image
          v-if="item.visible"
          :src="item.src"
          mode="aspectFill"
          style="width: 100%; height: 200px;"
        ></image>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/image1.jpg', visible: false },
          { src: 'https://example.com/image2.jpg', visible: false },
          { src: 'https://example.com/image3.jpg', visible: false }
        ]
      };
    },
    mounted() {
      const observer = uni.createIntersectionObserver(this);
      this.list.forEach((item, index) => {
        observer.relativeToViewport().observe(`.item-${index}`, (res) => {
          if (res.intersectionRatio > 0) {
            item.visible = true;
          }
        });
      });
    }
  };
  </script>
  
  <style>
  .item {
    height: 200px;
  }
  </style>
  

三、使用第三方懒加载库

如果需要更复杂的懒加载功能，可以使用第三方懒加载库，如 vue-lazyload。

1. 安装 vue-lazyload

• 安装 vue-lazyload：

  npm install vue-lazyload
  

2. 在 UniApp 中使用

• 示例：

  import Vue from 'vue';
  import VueLazyload from 'vue-lazyload';
  
  Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: 'https://example.com/error.png',
    loading: 'https://example.com/loading.gif',
    attempt: 1
  });
  
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/image1.jpg' },
          { src: 'https://example.com/image2.jpg' },
          { src: 'https://example.com/image3.jpg' }
        ]
      };
    }
  };
  

• 在模板中使用：

  <template>
    <view>
      <image
        v-for="(item, index) in list"
        :key="index"
        v-lazy="item.src"
        mode="aspectFill"
        style="width: 100%; height: 200px;"
      ></image>
    </view>
  </template>
  

四、总结

UniApp 处理图片懒加载的步骤如下：

1. 使用 lazy-load 属性：在微信小程序和 H5 平台使用 lazy-load 属性实现懒加载。
2. 手动实现懒加载：通过监听滚动事件或使用 IntersectionObserver API 实现懒加载。
3. 使用第三方懒加载库：通过 vue-lazyload 实现更复杂的懒加载功能。

以下是一个完整的 lazy-load 示例：

<template>
  <view>
    <image
      v-for="(item, index) in list"
      :key="index"
      :src="item.src"
      lazy-load
      mode="aspectFill"
      style="width: 100%; height: 200px;"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' },
        { src: 'https://example.com/image3.jpg' }
      ]
    };
  }
};
</script>

通过合理使用这些方法，可以轻松实现 UniApp 中的图片懒加载功能，提升页面性能。