javascript - Concernant les problèmes rencontrés lors de l'utilisation de jquery.lazyload, aidez-moi s'il vous plaît!

Question

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');
                    }
                });

            });

Answer 1

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

Answer 2

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');
                }
            });

Answer 3

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

https://jsfiddle.net/06rcojjd/