javascript - Regarding the problems encountered when using jquery.lazyload, please help!
ringa_lee
ringa_lee 2017-05-19 10:45:21
0
3
576

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

ringa_lee

reply all(3)
黄舟

Isn’t this great? . .

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

仅有的幸福

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

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

https://jsfiddle.net/06rcojjd/

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!