考えすぎかもしれませんが、ユーザーが自分のアバター画像を更新できる avatarprofile コンポーネントを取得しました。イメージ ホスティングとして Google Cloud ストレージを使用し、イメージ CDN (イメージキット) を使用してイメージの最適化/キャッシュを処理しています。すべてうまくいきます...しかし、誰かが私を助けてくれるかどうか疑問に思っていた小さな煩わしさがあります:
まず、これが私のコードです（私が問題を抱えていることを説明するのに役立ちます）：
async avatarChangeHandler(e) {
this.overlayShow = true //<-- show a loading indicator
try {
if (e.target.files.length) {
this.image = await new Promise((resolve) => {
const reader = new FileReader()
reader.onload = (e) => {
resolve(e.target.result)
}
reader.readAsDataURL(e.target.files[0])
})
await this.photoUpload() //<-- upload image to Google storage and return new image URL
await this.updateAvatar() //<-- update user's profile in the database with new URL
await this.$store.dispatch('getUserProfile', this.currentUser) //<-- grab updated profile
console.log('updating...done')
this.overlayShow = false //<-- terminate the loading indicator
問題は、ユーザー プロファイルが新しい画像 URL で更新され、画像 CDN よりも高速にフェッチされることです...つまり、overlayShowは既に false に設定されており、古い画像が 1 秒ほど表示されます (画像のレベルによって異なります)。最適化が必要です)。
overlayShow新しいイメージでイメージ CDN が完了するまで、 が false に設定されないようにするにはどうすればよいですか? ありがとうございます。これは実現不可能かもしれませんが、アプローチに関するアドバイスや提案を探しています。ありがとう！