微信小程序image组件的@load事件在图片没有加载完导致序列帧动画闪烁，如何解决？

Question

微信小程序image组件的@load事件在图片没有加载完导致序列帧动画闪烁

<view class="item-father" :class="{'animation': isLoad}">
            <image class="item" v-for="(i,index) in planetDefault" @load="handleImageLoad(index)" :key="index" :src="i">
            </image>
        </view>

```javascript

async handleImageLoad(index) {
                this.loadStatus[index] = 1;
                if (!this.loadStatus.includes(0)) {
                    // 所有图片加载完成
                    this.isLoad = true
                }
            }

```

Answer 1

1. 初始化加载状态
   首先确保loadStatus数组正确初始化，用于跟踪每张图片的加载状态。如果planetDefault是图片数组，loadStatus应该与之相对应，并且初始值设为0（表示未加载）。

data() {
    return {
        loadStatus: new Array(this.planetDefault.length).fill(0),
        isLoad: false,
    };
}

1. 更新handleImageLoad方法
   当图片触发@load事件时，你可以设置相应的loadStatus索引为1（表示已加载）。然后检查所有图片是否加载完成，如果是，则更新isLoad为true来启动动画。使用异步方法async是可行的，但在这种情况下并不必要，因为我们不需要等待任何异步操作。

handleImageLoad(index) {
    this.loadStatus[index] = 1;
    if (this.loadStatus.every(status => status === 1)) {
        this.isLoad = true;
    }
}

1. 使用CSS过渡平滑动画
   确保在图片加载完成前不展示或不执行动画，可以在CSS中控制。例如，可以利用Vue的动态类绑定，在所有图像加载完成前隐藏图像或不应用动画。

.item-father {
    visibility: hidden; /* 默认不可见 */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.item-father.animation {
    visibility: visible; /* 加载完成后可见 */
    opacity: 1;
}

1. 使用计算属性优化性能
   如果planetDefault有可能变化，或者希望更加响应式地处理这部分逻辑，可以考虑使用计算属性来自动处理加载状态的检查。

computed: {
    allImagesLoaded() {
        return this.loadStatus.every(status => status === 1);
    }
},
watch: {
    allImagesLoaded(newVal) {
        if (newVal) {
            this.isLoad = true;
        }
    }
}