CODEWITHSUNDEEP
cssflexboxlazy-loading
Kim Aldis
Kim Aldis

Reputation: 783

Flex and loading lazy

I'm using flex to build rows of arbitrarily sized images responsively and I'd like to also use loading lazy. My problem is that loading lazy loads all the images unless I give the img tags a height but, using flex, setting a height breaks the display. Can this be made to work or will I have to roll my own lazy loading. Ta.

<?php
function Row( $images ) {

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

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

    ?></div><?php
}

Upvotes: 0

Views: 1471

Answers (1)

Kim Aldis
Kim Aldis

Reputation: 783

My best solution: https://jsfiddle.net/kimaldis/16hsvw0t/26/

basically, wrap the images in a div with padding-top set to a percentage value to force the div's height to a value calculated using the aspect ratios of the images that will fill the row. Then use flex as before to make the wrapping divs the correct width to fill the row widthways. because images are now out of the browser viewport before the images are loaded, the lazyload works.

In the real world, the padding-tops are calculated in PHP. In the jsfiddle example, I've hard-coded them.

<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>

Upvotes: 1

Related Questions