如何正确地加载图像的垂直列表而不挤压其文本(图像附件)

Question

​

​

当我加载我的页面时，我有一张带有垂直图像列表的卡片。因为加载图像需要时间，所以文本加载速度更快，因此它被压缩，如所附的屏幕截图所示。当图像持续加载时，文本是否有可能出现在正确的位置？我怎么才能解决这个问题？我使用php作为循环，但我相信这纯粹是一个html问题。我正在<div class="card-body">中循环下面的代码

<div id="<?php echo $imgid; ?>" class="col-lg-6 col-xxl-12 mb-3">
 <div class="row">           
  <div class="col-12">
   <div class="position-relative h-sm-100">
    <div class="img-hover-zoom">
     <img class="img-fluid fit-cover w-sm-100 h-sm-100 rounded-1 absolute-sm-centered" style="filter: brightness(70%);" src="img/<?php echo $imgfile; ?>" alt="" />
    </div>
    <div class="badge rounded-pill bg-gradient text-dark position-absolute bottom-0 start-0 ms-2 mb-2 fs--2 z-index-2">
     <?php echo $topic; ?> | <?php echo $subtopic; ?>
    </div>
   </div>
  </div>
 </div>
</div>

Answer 1

你需要在某种程度上为图像预留位置。

您可以用HTML大小指定图像的大小。

<img width="480" height="360" src="image.jpg">

您可以预先下载CSS代码并在其中指定图像大小。在HTML下载完成之前加载CSS代码是非常重要的。

img { width: 480px; height: 360px }

您可以延迟加载在网站的第一个屏幕上不可见的图像，而无需滚动。这种方法称为延迟加载。

<img loading="lazy" src="image.jpg">

你也可以上传不成熟的图片在开始，但存根。低分辨率图像往往体积小，加载速度快。