uni-app 懒加载

vueper 1楼•8 天前

在uni-app中实现懒加载可以有效提升应用性能，尤其是在处理大量图片或复杂组件时。懒加载的核心思想是延迟加载非关键资源，直到用户滚动到它们所在的视图区域。以下是一个关于如何在uni-app中实现图片懒加载的代码案例。

1. 使用 `v-lazy` 指令

uni-app 提供了内置的 v-lazy 指令用于图片懒加载。首先，确保你的项目中已经引入了必要的组件库。

示例代码：

<template>
  <view>
    <scroll-view scroll-y="true" style="height: 100vh;">
      <view v-for="(item, index) in items" :key="index" class="item">
        <image v-lazy="item.url" class="lazy-image"></image>
        <text>{{ item.title }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { url: 'https://example.com/image1.jpg', title: 'Image 1' },
        { url: 'https://example.com/image2.jpg', title: 'Image 2' },
        // 更多图片项...
      ]
    };
  }
};
</script>

<style>
.item {
  margin: 10px;
}

.lazy-image {
  width: 100%;
  height: 200px; /* 根据需求调整高度 */
  object-fit: cover;
}
</style>

在这个例子中，v-lazy 指令被用于 <image> 标签，它会延迟加载 item.url 指定的图片。当用户滚动到图片所在位置时，图片才会开始加载。

2. 配置懒加载选项

在 pages.json 中，你可以配置全局的懒加载选项，比如预加载高度和错误图片等。

示例配置：

{
  "globalStyle": {
    "lazyLoad": true,
    "preloadRule": {
      "images": ["https://", "http://", "/static/"],
      "videos": ["https://", "http://"]
    },
    "errorImage": "/static/error.png"
  }
}

这里，lazyLoad 设置为 true 启用懒加载，preloadRule 定义了预加载规则，errorImage 指定了加载失败时显示的默认图片。

3. 注意事项

确保你的图片URL符合预加载规则，否则可能不会被懒加载。
懒加载图片时，考虑使用合适的占位图或骨架屏以提升用户体验。
在处理大量图片时，考虑使用CDN加速图片加载。