Question

图像是从Url中加载的，显示速度明显慢于文本。查看我的现场演示，直观了解问题所在。

https://still-wave-25615.herokuapp.com/

我知道加载图像的时间更长，因为它是从url获取图像的。我不知道如何解决这个问题，但是任何见识都可以帮上忙。我正在考虑为父元素提供一种显示样式，直到图像加载后才显示，但这感觉很麻烦。

如果有区别，此应用是在服务器端呈现的。我正在从api获取数据。

 <div class="rDItem" v-for="(randomDrink, index) of arrayRandom" :key="index">
        <div class="rDPrimary">
          <div class="rDPS">
            <img :src="randomDrink.strDrinkThumb">
          </div>
          <div class="rDPS">
            <p>Name: {{randomDrink.strDrink }}</p>
            <p>Type: {{randomDrink.strAlcoholic}}</p>
            <p>Glass: {{randomDrink.strGlass}}</p>
            <p>
              <u>Ingredients</u>
            </p>
            <p
              v-for="(value, name, index) in randomDrink.strIngredients"
              :key="index"
            >{{name}} : {{value}}</p>
          </div>
        </div>

        <p class="underLine">Instructions</p>

        <p>{{randomDrink.strInstructions}}</p>
      </div>

Answer 1

为什么图像加载后不触发消息？您可以使用 onload 事件来做到这一点：

<img
  onload="alert('Do your logic here!')"
  src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.2-hp.gif"
>

不过，您可能应该添加一个加载微调器，这样，在请求仍未完成时，页面就会有响应。

在我的文字之后渲染了我的图片，我该如何解决

1 个答案: