lazy-load.js

import throttle from '../utils/throttle';

export default (($) => {
  const NAME     = 'lazyload';
  const DEFAULTS = {
    throttle: 1000,
    offset: 200
  };

  class LazyLoad {
    constructor(element, options) {
      options = $.extend({}, DEFAULTS, options || {});

      this._element = element;
      this._options = options;

      this.listeners();
      this.checkVisiblePlaceholders();
    }

    listeners() {
      this.onScrollHandler = throttle(this.onScroll.bind(this), this._options.throttle);
      $(window).on('scroll', this.onScrollHandler);
    }

    onScroll() {
      return this._element.length ? this.checkVisiblePlaceholders() : $(window).off('scroll', this.onScrollHandler);
    }

    checkVisiblePlaceholders() {
      this.windowHeight = $(window).height();
      this.windowWidth  = $(window).width();

      Array.prototype.forEach.call(this._element, this.checkPlaceholder.bind(this));
    }

    checkPlaceholder(placeholder) {
      if (this.isPlaceholderVisible(placeholder)) {
        this.renderImage(placeholder);
        this.removeFromArray(this._element, placeholder);
      }
    }

    isPlaceholderVisible(placeholder) {
      return placeholder.getBoundingClientRect().top <= (this.windowHeight + this._options.offset);
    }

    removeFromArray(array, item) {
      let index = Array.prototype.indexOf.call(array, item);
      Array.prototype.splice.call(array, index);
    }

    renderImage(placeholder) {
      placeholder.parentNode.replaceChild(this.createImage(placeholder), placeholder);
    }

    createImage(placeholder) {
      let image = document.createElement('img');

      this.parseAttributes(image, placeholder.attributes);

      if (let breakpoints = placeholder.getAttribute('data-srcset')) {
        this.parseBreakpoints(image, breakpoints);
        
        return image;
      }
      
      image.src = placeholder.getAttribute('data-src');

      return image;
    }

    parseAttributes(image, attributes) {
      Array.prototype.forEach.call(attributes, (attr) => {
        if (attr.name !== 'data-lazy' || attr.name !== 'data-src') {
          image.setAttribute(attr.name, attr.value);
        }
      });
    }

    parseBreakpoints(image, breakpoints) {
    }

    destroy() {
      $(window).off('scroll', this.onScrollHandler);
    }
  }

  return LazyLoad;
})(jQuery);