echo/dist/echo.js

/*!
 *  Echo
 *  @version 1.1.0
 *  @author Todd Motto http://toddmotto.com
 *  Project: https://github.com/toddmotto/echo
 *
 *  Raw JavaScript lazy-loading images with HTML5 data-* attributes.
 *  Copyright 2013. MIT licensed.
 */
window.echo = (function (window, document, undefined) {

  'use strict';

  /*
   * Constructor function
   */
  var Echo = function (elem) {
    this.elem = elem;
  };

  /*
   * Images for echoing
   */
  var echoStore = [];

  /*
   * Element in viewport logic
   */
  var scrolledIntoView = function (element) {
    var coords = element.getBoundingClientRect();
    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
  };

  /*
   * Changing src attr logic
   */
  var echoSrc = function (img, callback) {
    img.src = img.getAttribute('data-echo');
    if (callback) {
      callback();
    }
  };

  /*
   * Remove loaded item from array
   */
  var removeEcho = function (element, index) {
    if (echoStore.indexOf(element) !== -1) {
      echoStore.splice(index, 1);
    }
  };

  /*
   * Echo the images and callbacks
   */
  var echoImages = function () {
    for (var i = 0; i < echoStore.length; i++) {
      var self = echoStore[i];
      if (scrolledIntoView(self)) {
        echoSrc(self, removeEcho(self, i));
      }
    }
  };

  /*
   * Prototypal setup
   */
  Echo.prototype = {
    init : function () {
      echoStore.push(this.elem);
    }
  };

  /*
   * Initiate the plugin
   */
  var lazyImgs = document.querySelectorAll('img[data-echo]');
  for (var i = 0; i < lazyImgs.length; i++) {
    new Echo(lazyImgs[i]).init();
  }

  /*
   * Bind the events
   */
  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', echoImages, false);
  } else {
    window.onload = echoImages;
  }
  window.onscroll = echoImages;

})(window, document);