web-dev-qa-db-fra.com

paresseux chargement des images sur le défilement et "venir en vue"

J'utilise Lazy comme plugin de chargement d'images paresseux. J'ai un div où je charge des divs comme ceci:

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

Donc je lance le plugin et ça marche pour les premiers visibles et quand je fais défiler:

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

Mais maintenant, j'ai une fonction qui "filtre" les divs par leurs attributs lorsque j'entre sth dans mon entrée de recherche et il ne parvient pas à charger l'image lorsque le div correspondant est affiché:

$(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();
    }
});

J'ai essayé bind: "event"/w et w/out delay: 0 (chargement du plugin dans la fonction de recherche), mais lors de la recherche, toutes les images étaient immédiatement chargées en arrière-plan.

Tout indice très apprécié

MISE À JOUR: Je viens juste de remarquer que dans Chrome DevTab, après avoir entré une lettre dans ma boîte de recherche, toutes les images et, éventuellement, celle que je recherche (si c'est la dernière, cela prend du temps (30 Mo)

javascriptjqueryhtmlcsslazy-loading
6
PrimuS

Il existe une excellente bibliothèque appelée Lozad.js qui peut vous aider à charger plus facilement vos images, comme le fait le chargement paresseux, mais de manière plus simple.

Vous pouvez le télécharger ici de Github. 

Page de démonstration ici .

Explication:
Cette bibliothèque chargera vos images une par une lors du défilement vers chaque ancre d'image par nom de classe.

Exemple  

HTML:
En-tête ->

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

L'élément d'image devrait ressembler à ceci: 

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

J'espère que cela vous aidera.
Meilleur,
Je fais.

2
Idoshhh