jQuery with "on" listening
Closed this issue · 4 comments
If you plan to load a ajax and put new dom elements, you will need to listen a sroll after load:
$(function () { function i() { var t = document.querySelectorAll("img.lazyload"), e = t.length; for (!e && window.removeEventListener("scroll", i); e--;) { var r = window.innerHeight; if (t[e].getBoundingClientRect().top - r <= 100) { if (t[e].getAttribute("data-src") && (t[e].src = t[e].getAttribute("data-src")), t[e].getAttribute("data-srcset") && (t[e].srcset = t[e].getAttribute("data-srcset")), "PICTURE" === t[e].parentElement.tagName) for (var n = t[e].parentElement.querySelectorAll("source"), a = n.length; a--;) n[a].srcset = n[a].getAttribute("data-srcset"); t[e].addEventListener("load", function () { this.classList.remove("lazyload") }) } } } i(); $(window).on('resize scroll', function () { i(); }); });
What are you trying to achieve?
The script listens to scroll events, so you don't really need to bind it to a load event...
Actually, they stop to work after a new dom...
@rafaelkapela When all images loaded, scroll listener ends. So you should add new listeners when dom modified or rerun the code simply.
Ahh yeah the lazyload is a bit different from the lazyestload.
The easiest way to handle things is to just call the script again after you've changed the DOM