mttlazyload/index.js

Simple img lazyload for IE10+

export default class Lazyload {

  static enable(){
    Lazyload.resolveLazyLoad(document.querySelectorAll('[critical]'));
    window.addEventListener("scroll", function() {
      Lazyload.resolveLazyLoad(document.querySelectorAll('[lazy-load]'));
    });
    Lazyload.resolveLazyLoad(document.querySelectorAll('[lazy-load]'));
  }

  static isScrolledIntoView(elem)
  {
    let docViewTop = window.scrollY;
    let elemTop = elem.getBoundingClientRect().top + document.body.scrollTop - 1000;

    return (elemTop <= docViewTop);
  }

  static resolveLazyLoad(lazyElements) {

    Array.prototype.forEach.call(lazyElements, function(item){
      if(Lazyload.isScrolledIntoView(item) && !item.getAttribute('lazy-loaded')) {
        const fullSize = jQuery(item).attr('full') ?
            item.getAttribute('full') :
            item.getAttribute('src');

        if (fullSize) {
          let preload = new Image();
          preload.onload = () => {
            item.setAttribute('src', fullSize);
            item.style.filter = 'blur(0px)';
          };
          preload.src = fullSize;
        }
        item.setAttribute('lazy-loaded', 'true');
      }
    });
  }
}