Echo 1.5.0

README.md

@@ -30,12 +30,12 @@ Using Echo.js is simple, just add the image you wish to load to a `data-echo`  a
 The `init()` API takes a few options
 
 #### offset
-Type: `Integer` Default: `0`
+Type: `Number|String` Default: `0`
 
 The `offset` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below the viewport, use `1000`.
 
 #### throttle
-Type: `Integer` Default: `250`
+Type: `Number|String` Default: `250`
 
 The throttle is managed by an internal function that prevents performance issues from continuous firing of `window.onscroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds.
 
@@ -53,7 +53,7 @@ Using `render()` is also throttled, which means you can bind it to a `window.onr
 Drop your files into your required folders, make sure you're using the file(s) from the `dist` folder, which is the compiled production-ready code. Ensure you place the script before the closing `</body>` tag so the DOM tree is populated when the script runs.
 
 ## Configuring Echo
-Add the image that needs to load when visible in a `data-echo` attribute:
+Add the image that needs to load when it's visible inside the viewport in a `data-echo` attribute:
 
 ```html
 <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

dist/echo.js

@@ -1,52 +1,102 @@
-/*! Echo v1.4.0 | (c) 2013 @toddmotto | MIT license | github.com/toddmotto/echo */
-window.Echo = (function (window, document, undefined) {
+/*! Echo v1.5.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */
+window.Echo = (function (global, document, undefined) {
 
   'use strict';
 
-  var store = [], offset, throttle, poll;
+  /**
+   * store
+   * @type {Array}
+   */
+  var store = [];
 
-  var _inView = function (el) {
-    var coords = el.getBoundingClientRect();
-    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
+  /**
+   * offset, throttle, poll vars
+   */
+  var offset, throttle, poll;
+
+  /**
+   *  _inView
+   * @private
+   * @param {Element} element Image element
+   * @returns {Boolean} Is element in viewport
+   */
+  var _inView = function (element) {
+    var coords = element.getBoundingClientRect();
+    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + offset);
   };
 
+  /**
+   * _pollImages Loop through the images if present
+   * or remove all event listeners
+   * @private
+   */
   var _pollImages = function () {
-    for (var i = store.length; i--;) {
-      var self = store[i];
-      if (_inView(self)) {
-        self.src = self.getAttribute('data-echo');
-        store.splice(i, 1);
+    var length = store.length;
+    if (length > 0) {
+      for (var i = 0; i < length; i++) {
+        var self = store[i];
+        if (self && _inView(self)) {
+          self.src = self.getAttribute('data-echo');
+          store.splice(i, 1);
+          length = store.length;
+          i--;
+        }
+      }
+    } else {
+      if (document.removeEventListener) {
+        global.removeEventListener('scroll', _throttle);
+      } else {
+        global.detachEvent('onscroll', _throttle);
       }
+      clearTimeout(poll);
     }
   };
 
+  /**
+   * _throttle Sensible event firing
+   * @private
+   */
   var _throttle = function () {
     clearTimeout(poll);
     poll = setTimeout(_pollImages, throttle);
   };
 
+  /**
+   * init Module init function
+   * @param {Object} [obj] Passed in Object with options
+   * @param {Number|String} [obj.throttle]
+   * @param {Number|String} [obj.offset]
+   */
   var init = function (obj) {
+
     var nodes = document.querySelectorAll('[data-echo]');
     var opts = obj || {};
-    offset = opts.offset || 0;
-    throttle = opts.throttle || 250;
+    offset = parseInt(opts.offset || 0);
+    throttle = parseInt(opts.throttle || 250);
 
     for (var i = 0; i < nodes.length; i++) {
       store.push(nodes[i]);
     }
 
-    _throttle();
+    _pollImages();
 
     if (document.addEventListener) {
-      window.addEventListener('scroll', _throttle, false);
+      global.addEventListener('scroll', _throttle, false);
+      global.addEventListener('load', _throttle, false);
     } else {
-      window.attachEvent('onscroll', _throttle);
+      global.attachEvent('onscroll', _throttle);
+      global.attachEvent('onload', _throttle);
     }
+
   };
 
+  /**
+   * return Public methods
+   * @returns {Object}
+   */
   return {
     init: init,
-    render: _throttle
+    render: _pollImages
   };
 
-})(window, document);
+})(this, document);

package.json

@@ -1,10 +1,9 @@
 {
   "name": "Echo",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "homepage": "https://github.com/toddmotto/echo",
   "author": "Todd Motto",
-  "year" : "2013",
-  "description": "Lazy-loading with data-* attributes, offsets and throttle options",
+  "description": "Lazy-loading with data-* attributes, offset and throttle options",
   "author": {
     "name": "Todd Motto",
     "email": "[email protected]",

src/echo.js

@@ -1,51 +1,101 @@
-window.Echo = (function (window, document, undefined) {
+window.Echo = (function (global, document, undefined) {
 
   'use strict';
 
-  var store = [], offset, throttle, poll;
+  /**
+   * store
+   * @type {Array}
+   */
+  var store = [];
 
-  var _inView = function (el) {
-    var coords = el.getBoundingClientRect();
-    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
+  /**
+   * offset, throttle, poll vars
+   */
+  var offset, throttle, poll;
+
+  /**
+   *  _inView
+   * @private
+   * @param {Element} element Image element
+   * @returns {Boolean} Is element in viewport
+   */
+  var _inView = function (element) {
+    var coords = element.getBoundingClientRect();
+    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + offset);
   };
 
+  /**
+   * _pollImages Loop through the images if present
+   * or remove all event listeners
+   * @private
+   */
   var _pollImages = function () {
-    for (var i = store.length; i--;) {
-      var self = store[i];
-      if (_inView(self)) {
-        self.src = self.getAttribute('data-echo');
-        store.splice(i, 1);
+    var length = store.length;
+    if (length > 0) {
+      for (var i = 0; i < length; i++) {
+        var self = store[i];
+        if (self && _inView(self)) {
+          self.src = self.getAttribute('data-echo');
+          store.splice(i, 1);
+          length = store.length;
+          i--;
+        }
+      }
+    } else {
+      if (document.removeEventListener) {
+        global.removeEventListener('scroll', _throttle);
+      } else {
+        global.detachEvent('onscroll', _throttle);
       }
+      clearTimeout(poll);
     }
   };
 
+  /**
+   * _throttle Sensible event firing
+   * @private
+   */
   var _throttle = function () {
     clearTimeout(poll);
     poll = setTimeout(_pollImages, throttle);
   };
 
+  /**
+   * init Module init function
+   * @param {Object} [obj] Passed in Object with options
+   * @param {Number|String} [obj.throttle]
+   * @param {Number|String} [obj.offset]
+   */
   var init = function (obj) {
+
     var nodes = document.querySelectorAll('[data-echo]');
     var opts = obj || {};
-    offset = opts.offset || 0;
-    throttle = opts.throttle || 250;
+    offset = parseInt(opts.offset || 0);
+    throttle = parseInt(opts.throttle || 250);
 
     for (var i = 0; i < nodes.length; i++) {
       store.push(nodes[i]);
     }
 
-    _throttle();
+    _pollImages();
 
     if (document.addEventListener) {
-      window.addEventListener('scroll', _throttle, false);
+      global.addEventListener('scroll', _throttle, false);
+      global.addEventListener('load', _throttle, false);
     } else {
-      window.attachEvent('onscroll', _throttle);
+      global.attachEvent('onscroll', _throttle);
+      global.attachEvent('onload', _throttle);
     }
+
   };
 
+  /**
+   * return Public methods
+   * @returns {Object}
+   */
   return {
     init: init,
-    render: _throttle
+    render: _pollImages
   };
 
-})(window, document);
+})(this, document);