相关疑难解决方法(0)

林试图找出如何延迟加载card-columns有card-img-top，例如：

<div class="card-columns">
    <div class="card text-center">
        <img class="card-img-top lazy" src="img/foo.jpg" alt="foo" />
        <div class="card-body">
            <!-- more code -->
        </div>
    </div>
</div>

我的研究

搜索标签bootstrap-4和bootstrap，我发现“如何一张一张地为 Bootstrap 4 卡片设置动画？ ”但这是针对卡片上没有图像加载的动画。

“ Bootstrap-carousel lazy loader ”适用于 Bootstrap 3。

在 Bootstrap 的文档中搜索我能够返回的唯一加载结果是Spinners。

在标签bootstrap-4下进一步搜索，我能够找到“ Bootstrap carousel Images not shows ”，但这集中在轮播而不是卡片上。

想偷懒负载后lazyload使用配方响应图像我省略了data-srcset＆data-sizes：

<div class="card-columns">
    <div class="card text-center">
        <img class="card-img-top lazy" src="img/foo.jpg" alt="foo" />
        <div class="card-body">
            <!-- …

我的网站承载了大量各种尺寸的图像。这些图像在从桌面到移动设备的所有浏览器宽度上都具有响应性并改变大小。我在 Google Search Console 中看到我的 CLS（累积布局偏移）很差，为 0.25 秒。我的网站布局随着图像加载而变化。

由于我的图像具有响应性，因此我无法指定图像的确切大小，或使用占位符来保留空间。

使用响应式图像防止 CLS 的现代方法是什么？

布局在这里：https : //jsfiddle.net/exspwgab/

更新：我在互联网上尝试了一个建议，即在 img 标签中指定图像文件的宽度和高度，例如：

<img src="photo.jpg" width="1504" height="752">

然后在 CSS 中你做：

width: 100%;
height: auto;

这似乎在任何浏览器中都不起作用。当图像加载时，我网页上的元素仍然会四处移动。

如果有人有适用于所有浏览器的解决方案，请告诉我。我基本上需要占位符来保存图像加载时的空间以防止页面卡顿问题。

我的响应式布局的 JSFiddle：https ://jsfiddle.net/exspwgab/