对话框显示后加载对话框内的图像答案

【问题标题】：Image inside dialog loads after dialog displays对话框显示后加载对话框内的图像
【发布时间】：2020-04-16 22:11:06
【问题描述】：

我有一个 Vuetify 对话框，我在页面加载时显示，实际上是在一秒钟左右之后，以便动画显示以显示模式对话框。该对话框包含一些文本和图像。问题是，对话框显示，然后文本弹出，并在延迟（图像下载时）后显示图像，对话框扩展为适当的大小。

如何让图像加载到内存中并在对话框显示之前可用？我希望外观是一个单一的平滑过渡。现在它以块的形式出现。

 <template>
    <div>
      <v-dialog v-model="dialog" eager persistent max-width="500">
        <v-card>
          <v-card-title class="headline green lighten-2 white--text" primary-title>
            <h3>Congratulations!</h3>
          </v-card-title>

          <v-card-text>
            <div class="mt-4 mx-0 headline font-italic font-weight-bold green--text">
              You just received a
              <span class="text-no-wrap">pay raise!</span>
            </div>
            <div class="mt-2 mb-3 subtitle-1">Your Pay-Per-Mile has just increased.</div>
            <v-row align="center" justify="center">
              <v-img
                src="@/assets/Thank-you-notes-for-job-well-done.jpg"
                max-height="440"
                max-width="450"
              ></v-img>
            </v-row>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green" text @click="stop()">Keep it coming</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </template>

...

  setTimeout(() => {
    this.dialog = true;
  }, 2000);

【问题讨论】：

你也许可以在对话框外添加一个隐藏的<img>元素，并使用相同的src，以便立即加载它

标签： vue.js vuetify.js

【解决方案1】：

结果比我想象的要容易得多。感觉图像默认为延迟加载，显然它确实如此。我所要做的就是在图像的 eager 属性上，现在图像作为整个对话框的一部分加载。

【讨论】：