Lazy loading images on a scroll and "come into view"

Question

I use Lazy as a lazy image upload plugin. I have a div where I load divs as follows:

<div class="nano-content" id="lScroll">

    /*... MORE LIKE THIS ... */
    <div class="card">
        <div class="city-selected city-medium clickChampion pointer"
     data-champ-id="1">
        <article>
            <div class="info">
                <div class="city">
                    CHAMPNAME
                </div>
            </div>
        </article>
            <figure class="cFigure lazy" data-src="images/champions/CHAMPNAME_0.png"></figure>
        </div>
    </div>
    /*... MORE LIKE THIS ... */

</div>

So, I run the plugin, and it works for the first ones visible and when I scroll:

var $lazy = $('#lScroll .lazy');
if ($lazy.length) {
    $lazy.Lazy({
        appendScroll: $('#lScroll')
    });
}

But now I have a function that “filters” divs by their attributes when I enter sth in my search input and do not load the image when the corresponding div is displayed:

$(document).on("keyup", "#searchVod", function () {
    var $search = $(this);
    var $sVal = $search.val().toLowerCase();
    if ($sVal !== "") {
        $(".vodCard").hide();
        $('[data-champ*="' + $sVal + '"]').show();
        $('[data-role*="' + $sVal + '"]').show();
    } else {
        $(".vodCard").show();
    }
});

I tried bind: "event"/ w and w / out delay: 0(loading the plugin into the search function), but when I looked for it, it will load ALL images immediately in the background.

Any hint is much appreciated

UPDATE: Chrome DevTab , , , , ( (30 )

Answer 1

Lozad.js, , , , .

Github.

- .

:
.

HTML:
→

<script src="https://cdn.jsdelivr.net/npm/lozad"></script>  

:

<img class="lozad" data-src="image.png">

Javascript

// Initialize library
lozad('.lozad', {
    load: function(el) {
        el.src = el.dataset.src;
        el.onload = function() {
            el.classList.add('fade')
        }
    }
}).observe()

, .
,
.