如何避免由于图像渲染而造成的布局中断？

Question

我正在这个网站=> https://https://dev.web.redpadel.com上工作，我在下面的屏幕=> https://dev.web.redpadel.com/about中有一些不想要的行为，你可以看到这个问题正在做一个f5，直到图像加载文本被渲染，然后它被img所推动，我怎么才能解决它才能有一个干净的呈现呢？谢谢您，欢迎您提出任何建议。该项目是用vuejs和Tailwind完成的，下面是

<template>
  <div
    ref="main"
    class="min-h-full h-screen w-full scroll-smooth overflow-y-scroll flex flex-col justify-between"
  >
    <div class="h-full">
      <Header :class="hideHeader ? 'hideHeader' : 'showHeader'" />
      <main>
        <div>
          <router-view
            class="overflow-x-hidden"
            :style="{ height: getScreenHeight }"
          />
        </div>
      </main>
      <Footer />
    </div>
  </div>
</template>

关于：

<template>
  <div class="bg-white border">
    <div class="pt-24">
      <div class="2xl:px-5">
        <img
          class="block rounded-xl mx-auto h-48 my-12 padel-img"
          :src="require('../assets/img/about-hero.jpg')"
          alt="about image"
        />
      </div>
      <div
        v-motion
        :initial="{ opacity: 0, y: 100 }"
        :enter="{ opacity: 1, y: 0, scale: 1 }"
        :delay="100"
        class="px-6"
      >
        <h1
          class="text-3xl mt-20 font-semibold text-center capitalize text-black animate-fade-up sm:text-5xl mb-2"
        >
          {{ t('aboutUs') }}
        </h1>

        <p
          class="text-center w-11/12 mx-auto px-2 font-regular text-lg text-tertiary mt-5 mb-32 animate-fade-up sm:text-xl sm:w-600 sm:mx-auto"
        >
          {{ t('aboutUsDesc') }}
        </p>
      </div>
    </div>
    <div class="bg-options flex flex-col px-2 py-32 md:text-xl hidden">
      <div class="mx-auto w-11/12 max-w-screen-2xl sm:w-600">
        <div class="max-w-screen-lg mx-auto">
          <p
            class="uppercase text-accent text-center mb-6 sm:text-left sm:w-11/12"
          >
            {{ t('ourMission') }}
          </p>

          <!-- use translations to replace template text -->
          <p
            v-for="text in textAbout"
            :key="text"
            class="text-left font-regular text-lg text-secondary my-3 md:text-xl mx-auto"
          >
            {{ text }}
          </p>
        </div>
      </div>
    </div>
    <QuoteSlider />
  </div>
</template>

<style>
.padel-img {
  width: 90%;
  max-width: 1560px;
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: unset;
    width: 80%;
  }
}
</style>

Answer 1

将height和width维度添加到图像中。这将告诉浏览器保留那么多空间。

https://web.dev/optimize-cls/#images-without-dimensions-%F0%9F%8C%86

Answer 2

您还可以将图像保存为渐进式/交错。这意味着，它不是从上到下加载，而是在加载时为您提供整个图像的低分辨率版本，因此在加载图像时不会发生跳转。