Flex和装入延迟

Question

我正在使用flex构建任意大小的图像行作为响应，我也想使用loading。我的问题是，除非我给img标签一个高度，否则加载延迟会加载所有的图像，但是，使用flex，设置一个高度会破坏显示。这是否可以工作，或者我将不得不滚动我自己的延迟加载。好的。

<?php
function Row( $images ) {

    ?><div style="width: 100%; display: flex;"><?php

        foreach ( $images as $image ) {
            ?><img src="<?=$image?>" loading="lazy"><?php
        }

    ?></div><?php
}

Answer 1

我的最佳解决方案：https://jsfiddle.net/kimaldis/16hsvw0t/26/

基本上，将图像包装在div中，并将padding设置为百分比值，以强制div的高度达到使用将填充此行的图像的纵横比计算出的值。然后，像以前一样使用flex使包装div具有正确的宽度，以便沿宽度填充行。由于在加载图像之前，图像现在已从浏览器视口中移出，因此可以使用延迟加载。

在现实世界中，填充顶部是用PHP计算的。在jsfiddle示例中，我对它们进行了硬编码。

<div class="row">
  <div class="img-container" style="flex: 1.5; padding-top: 27.2727272727%;">
    <img loading="lazy" src="http://buggeringabout.com/downloads/images/image_4.jpg">
  </div>
    <div class="img-container" style="flex: 1.5; padding-top: 27.2727272727%;">
    <img loading="lazy" src="http://buggeringabout.com/downloads/images/image_5.jpg">
  </div>
    <div class="img-container" style="flex: 1.5; padding-top: 27.2727272727%;">
    <img loading="lazy" src="http://buggeringabout.com/downloads/images/image_6.jpg">
  </div>
</div>