延迟加载图像时放置相同大小的占位符

Question

我的问题是，在加载图像时，标记的内容没有大小，而在加载完成时，图像会将所有内容压入其中。

我想通过某种方式放置一个占位符图像，使其与加载的图像大小相同，以防止出现这种情况，因此在加载图像时，将替换占位符，并将其余内容保留在同一位置。

此外，我知道图像的尺寸为300x400，但是其宽度设置为100％，并且容器会根据视口更改尺寸，因此会调整尺寸以保持宽高比。

我正在使用引导程序4。

<article class="card">
    <img loading="lazy" src="/img-size-is-300x400.jpg" class="card-img-top" />
    <div class="card-body">
        <h1 class="h6 card-title mb-0">
            <a href="/movie/123" class="stretched-link">
                Some movie title
            </a>
        </h1>
    </div>
</article>

---

设法通过放置另一个相同大小的img占位符和一个position: absolute来加载图像来解决该问题。它奏效了，但不确定ist是否是一种好的方法，我也认为这对SEO不利。

<article class="card">
    <img style="position: absolute" src="/placeholder-300x400.jpg" class="card-img-top" />
    <img loading="lazy" src="/img-size-is-300x400.jpg" class="card-img-top" />
    <div class="card-body">
        <h1 class="h6 card-title mb-0">
            <a href="/movie/123" class="stretched-link">
                Some movie title
            </a>
        </h1>
    </div>
</article>