Lazyload на чистом JS
 

Привет.
Возникла потребность написать на чистом 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 события? Мне кажется, это неправильно.

Объясните, пожалуйста, как такое реализовать.

NO_ONE,
заменить строку 8 на forEach а проверять условие внутри forEach

рони,
спасибо! :)