Привет.
Возникла потребность написать на чистом JS функцию lazyload для img/iframe/etc.
Нашёл хороший готовый вариант, который возвращает true/false, если искомый элемент попал во viewport:
function isInViewport(el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || d.documentElement.clientHeight));
}
var img = document.getElementById("img");
window.onscroll = function() {
if(isInViewport(img)) doSomething();
}
Окей, а как прикрутить такую функцию для множества элементов? Например, у меня имеется полученная через querySelectorAll переменная
images, содержащая несколько картинок.
Если я использую forEach, то каждый раз вешать на window события? Мне кажется, это неправильно.
Объясните, пожалуйста, как такое реализовать.