javascript - Regarding the problems encountered when using jquery.lazyload, please help!

Question

I found that this plug-in does not seem to process dynamically inserted elements, which means that dynamically inserted elements cannot be displayed normally, but always display the loading image. My current temporary solution is to add a The only container, and then initialize this container. Is there anything you can do?

            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

Isn’t this great? . .

lazyload is not a listener, so naturally it cannot take effect on elements inserted later. . .

Answer 2

I found a better solution, just remove the lazy hook and that’s it

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

Answer 3

Dynamic addition, after adding, add a .loadlazy() to the newly added element, right?

https://jsfiddle.net/06rcojjd/