时间戳

首页 > 解决方案 > 我的图像在我的文本之后被渲染我该如何解决这个问题

javascript - 我的图像在我的文本之后被渲染我该如何解决这个问题

问题描述

图像是从 URL 加载的，并且显示速度明显慢于文本。查看我的现场演示以了解该问题。

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

我知道加载图像需要更长的时间，因为它是从 url 获取图像。我不知道如何解决这个问题，但任何见解都会有所帮助。我正在考虑在图像加载之前给父元素一种不显示的样式，但这感觉很hacky。

如果这有所不同，此应用程序将在服务器端呈现。我正在从 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>

标签： javascriptvue.js

解决方案

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

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

不过，您可能应该添加一个加载微调器，以便在请求仍未完成时页面感觉响应。

推荐阅读