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');
}
});
});
黄舟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. . .
仅有的幸福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');
}
});
巴扎黑2017-05-19 10:47:21
Dynamic addition, after adding, add a .loadlazy()
to the newly added element, right?
https://jsfiddle.net/06rcojjd/