uniapp 如何在加载时给image添加占位效果

在uniapp中，如何在图片加载时显示一个占位效果？目前图片加载过程中会有一段空白期，用户体验不太好。想实现类似微信小程序中的image组件的lazy-load效果，或者像web中的loading占位图。请问有没有比较优雅的实现方式？最好能兼容H5和小程序平台。

songsunli 1楼

在uniapp中，可以通过以下方式实现图片加载占位效果：

使用v-if控制占位图和真实图片的显示
监听图片的@load事件，加载完成后隐藏占位图
设置占位图的样式，比如灰色背景或loading图标

示例代码：

<view>
  <image v-if="!loaded" src="placeholder.png" mode="aspectFill"></image>
  <image v-if="loaded" :src="imgUrl" @load="onImageLoad" mode="aspectFill"></image>
</view>

data() {
  return {
    loaded: false
  }
},
methods: {
  onImageLoad() {
    this.loaded = true
  }
}

sinazl 2楼

在 UniApp 中，可以通过以下方法为 image 组件添加加载时的占位效果：

方法一：使用默认占位图

在 image 组件的 src 属性加载完成前，设置默认占位图作为初始显示。

<template>
  <view>
    <image 
      :src="imageUrl" 
      :placeholder="placeholderUrl"
      mode="aspectFill"
      @load="onImageLoad"
      @error="onImageError"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/your-image.jpg',
      placeholderUrl: '/static/placeholder.png' // 本地占位图路径
    }
  },
  methods: {
    onImageLoad() {
      console.log('图片加载成功');
    },
    onImageError() {
      console.log('图片加载失败');
      // 可以在这里设置加载失败时的占位图
      this.imageUrl = this.placeholderUrl;
    }
  }
}
</script>

方法二：自定义加载状态

通过控制显示不同的图片来实现占位效果。

<template>
  <view>
    <image 
      v-if="!isLoaded"
      :src="placeholderUrl"
      mode="aspectFill"
    ></image>
    <image 
      v-else
      :src="imageUrl"
      mode="aspectFill"
      @load="onImageLoad"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/your-image.jpg',
      placeholderUrl: '/static/placeholder.png',
      isLoaded: false
    }
  },
  methods: {
    onImageLoad() {
      this.isLoaded = true;
    }
  }
}
</script>

方法三：使用 CSS 实现占位背景

为图片容器设置背景色或背景图作为占位。

<template>
  <view class="image-container">
    <image 
      :src="imageUrl"
      mode="aspectFill"
      @load="onImageLoad"
      :class="{ 'image-loaded': isLoaded }"
    ></image>
  </view>
</template>

<style scoped>
.image-container {
  width: 300rpx;
  height: 300rpx;
  background-color: #f5f5f5; /* 占位背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

image {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-loaded {
  opacity: 1;
}
</style>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/your-image.jpg',
      isLoaded: false
    }
  },
  methods: {
    onImageLoad() {
      this.isLoaded = true;
    }
  }
}
</script>

uniapp 如何在加载时给image添加占位效果

方法一：使用默认占位图

方法二：自定义加载状态

方法三：使用 CSS 实现占位背景

推荐做法：