search

Home  >  Q&A  >  body text

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

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

            });
ringa_leeringa_lee2769 days ago639

reply all(3)I'll reply

  • 黄舟

    黄舟2017-05-19 10:47:21

    Isn’t this great? . .

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

    reply
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:47:21

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

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:47:21

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

    https://jsfiddle.net/06rcojjd/

    reply
    0
  • Cancelreply