javascript - Concernant les problèmes rencontrés lors de l'utilisation de jquery.lazyload, aidez-moi s'il vous plaît!
ringa_lee
ringa_lee 2017-05-19 10:45:21
0
3
622

J'ai trouvé que ce plug-in ne semble pas traiter les éléments insérés dynamiquement, ce qui signifie que les éléments insérés dynamiquement ne peuvent pas être affichés normalement, mais affichent toujours l'image de chargement. Ma solution temporaire actuelle consiste à ajouter un élément unique au nœud nouvellement inséré. .conteneur, puis initialisez le conteneur. Pouvez-vous faire quelque chose ?

            var index = 0;
            var tpl = $("#template").text();
            $('#addItem').on('click', function () {
                var html = render(tpl, item);

                var $container = $('<p id="newItem' + index++ + '"></p>');

                $('body').append($container.html(html));

                $container.find("img.lazy").lazyload({
                    effect: "fadeIn",
                    load: function (index, elem) {
                        $(this).parent('.box').css('background', '#fff');
                    }
                });

            });
ringa_lee
ringa_lee

ringa_lee

répondre à tous(3)
黄舟

N'est-ce pas génial ? . .

lazyload n'est pas un écouteur, donc naturellement il ne peut pas prendre effet sur les éléments insérés ultérieurement. . .

仅有的幸福

J'ai trouvé une meilleure solution, il suffit de retirer le crochet paresseux et c'est tout

            $("img.lazy").lazyload({
                effect: "fadeIn",
                load: function (index, elem) {
                    $(this).parent('.box').css('background', '#fff').find('img').removeClass('lazy');
                }
            });
巴扎黑

Ajout dynamique, après l'ajout, ajoutez un .loadlazy() à l'élément nouvellement ajouté, n'est-ce pas ?

https://jsfiddle.net/06rcojjd/

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal