Lazy loading with uikit and filtering

hey there…
i’m using Zero One-template by @mrfreedom with the following code i made a “staff/member”-like block

<?php    // using the `toStructure()` method, we create a structure collection
        if($data->gridShuffle() == "true") {
            $items = $data->cards()->toStructure()->shuffle(); 
          } else {
            $items = $data->cards()->toStructure(); 
        }
        $gettags = $items->pluck('tags', ',', true);
        ?>
<section class="uk-section<?= $data->sectionSize() ?><?= $data->sectionColor() ?><?= $data->sectionRemovePadding() ?>">
    <div class="uk-container<?= $data->gridWidth() ?>" uk-filter="target: .js-filter">
        <div class="uk-grid uk-grid-divider uk-child-width-auto <?= $data->cardGap() ?>" uk-grid>
            <?php if(!empty($gettags)): ?>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li class="uk-active" uk-filter-control><a href="#">Alle</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <?php foreach ($gettags as $tag): ?>
                            <li uk-filter-control="[data-tags*='<?= $tag ?>']"><a href="#"><?= $tag ?></a></li>
                        <?php endforeach ?>
                    </ul>
               </div>
            <?php endif ?>
        </div>
        <ul class="js-filter <?php e($data->cardsDivider() == "true", ' uk-grid-divider') ?><?= $data->griddColumns() ?><?= $data->gridsColumns() ?><?= $data->gridmColumns() ?><?= $data->gridlColumns() ?><?= $data->gridxlColumns() ?>" uk-grid="masonry: <?= $data->gridMasonry() ?> <?php e($data->cardParallax() == "true", '; parallax: 90') ?>">
            <?php 
            // we can then loop through the entries and render the individual fields
            foreach ($items as $item): ?>
                <li data-tags="<?= $item->tags() ?>">
                    <div class="uk-card <?= $data->cardColor() ?>">
                        <div class="uk-card-media-top uk-inline-clip uk-transition-toggle">
                            <?php if($mediaImage1 = $item->mediaImage1()->toFile()): ?><img data-src="<?= $mediaImage1->url() ?>" width="<?= $mediaImage1->width() ?>" height="<?= $mediaImage1->height() ?>" alt="<?= $mediaImage1->alt() ?>" uk-img><?php endif ?>
                            <?php if($mediaImage2 = $item->mediaImage2()->toFile()): ?><img data-src="<?= $mediaImage2->url() ?>" width="<?= $mediaImage2->width() ?>" height="<?= $mediaImage2->height() ?>" alt="<?= $mediaImage2->alt() ?>" class="uk-transition-scale-up uk-position-cover" uk-img><?php endif ?>
                        </div>
                        <?php if($item->quoteText()->isNotEmpty()): ?>
                            <div class="uk-card-body uk-padding-small">
                                <em>"<?= $item->quoteText()->kirbytextinline() ?>"</em>
                            </div>
                        <?php endif ?>
                        <?php if($item->nameText()->isNotEmpty()): ?>
                            <div class="uk-card-footer uk-padding-small">
                                <p><strong><?= $item->nameText()->kirbytextinline() ?></strong><br />
                                    <?php if($item->descriptionText()->isNotEmpty()): ?>
                                    &#8212; <em><?= $item->descriptionText()->kirbytextinline() ?></em></p>
                                <?php endif ?>
                            </div>
                        <?php endif ?>

                    </div>
                </li>
            <?php endforeach ?>
        </ul>
    </div>
</section>

as you can see, i try to use ‘uk-img’ for getting lazy-load the images on the cards…
question: did i something wrong? or is lazy loading not usable together with filtering?

That’s probably a question you would have to ask in a UIKit forum or Stackoverflow?

my fault… i thought “General” is also open to general web-dev questions…

Hi, @demlak.

Haven’t really tested it with filter function, but there is no reason it shouldn’t work.
Although, I am not sure what you expect from lazy load.
It just helps on the first page load to load faster, and delay browser from downloading images until you scroll to them.

If you did everything right as instructed here https://getuikit.com/docs/image and here https://getuikit.com/docs/filter and that still doesn’t work for you, you can post an issue in UIkit issues https://github.com/uikit/uikit/issues

1 Like

Thx a lot…

yes, that’s what i want. The page we will generate, will host dozens of dozens of images… so i want to add lazy load for faster loading.

You can acomplish that easily if setup properly.
Check out this gallery page on a website I built for a church in Dubrovnik (Zero One based) https://www.isusovcidubrovnik.com/galerija
It has 96 images intotal, but loads in a snap. It is not even cached.

Thx… but we use shuffled cards including textareas + filtering… it’s very different from just displaying images in the same order…

1 Like