Merge remote-tracking branch 'upstream/master' into unload_on_scrollout

Conflicts:
	README.md
	dist/echo.js
	dist/echo.min.js
	src/echo.js

README.md

@@ -18,7 +18,8 @@ Using Echo.js is simple, just add the image you wish to load to a `data-echo`  a
   Echo.init({
     offset: 100,
     throttle: 250,
-    unload: false
+    unload: false,
+    callback: function(element, op){ console.log(element, "has been", op+'ed')}
   });
 
   // Echo.render(); is also available for non-scroll callbacks
@@ -56,6 +57,24 @@ Type: `Boolean` Default: `false`
 This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).
 This option requires the `placeholder` option also be set.
 
+#### callback
+Type: `Function`
+
+The callback will be passed the element that has been updated and what the update operation was (ie `load` or `unload`). This can be useful if you want to add a class like `loaded` to the element. Or do some logging.
+
+```js
+Echo.init({
+  callback: function(element, op) {
+    if(op === 'load') {
+      elemend.classList.add('loaded');
+    } else {
+      elemend.classList.remove('loaded');
+    }
+  }
+});
+```
+
+
 ## .render() API
 
 Echo's callback `render()` can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this:

dist/echo.js

@@ -15,6 +15,12 @@ window.Echo = (function (global, document, undefined) {
    */
   var toBeUnloaded = [];
 
+  /**
+   * callback - initialized to a no-op so that no validations on it's presence need to be made
+   * @type {Function}
+   */
+  var callback = function(){};
+
   /**
    * offsetBot, offsetTop throttle, poll, unload vars
    */
@@ -52,6 +58,7 @@ window.Echo = (function (global, document, undefined) {
             toBeUnloaded.push(self);
           }
           self.src = self.getAttribute('data-echo');
+          callback(self, 'load');
           toBeLoaded.splice(i, 1);
           loadingLength = toBeLoaded.length;
           i--;
@@ -64,6 +71,7 @@ window.Echo = (function (global, document, undefined) {
         self = toBeUnloaded[i];
         if (self && !_inView(self)) {
           self.src = self.getAttribute('data-echo-placeholder');
+          callback(self, 'unload');
           toBeUnloaded.splice(i, 1);
           unloadingLength = toBeUnloaded.length;
           i--;
@@ -93,6 +101,7 @@ window.Echo = (function (global, document, undefined) {
    * @param {Number|String} [obj.offsetBot]
    * @param {Number|String} [obj.offsetTop]
    * @param {Boolean} [obj.unload]
+   * @param {Function} [obj.callback]
    */
   var init = function (obj) {
 
@@ -103,6 +112,7 @@ window.Echo = (function (global, document, undefined) {
     offsetTop = parseInt(opts.offsetTop || offset);
     throttle = parseInt(opts.throttle || 250);
     unload = !!opts.unload;
+    callback = opts.callback || callback;
 
     toBeLoaded = [];
     toBeUnloaded = [];

dist/echo.min.js

@@ -1,2 +1,2 @@
 /*! Echo v1.5.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */
-window.Echo=function(a,b){"use strict";var c,d,e,f,g,h=[],i=[],j=function(a){var e=a.getBoundingClientRect(),f=e.top>=0&&e.left>=0&&e.top<=(window.innerHeight||b.documentElement.clientHeight)+c&&e.top>=-1*d,g=e.bottom>=-1*d&&e.left>=0&&e.bottom<=(window.innerHeight||b.documentElement.clientHeight)+c;return f||g},k=function(){var a,b,c,d=h.length;if(d>0)for(b=0;d>b;b++)c=h[b],c&&j(c)&&(g&&(c.setAttribute("data-echo-placeholder",c.src),i.push(c)),c.src=c.getAttribute("data-echo"),h.splice(b,1),d=h.length,b--);if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!j(c)&&(c.src=c.getAttribute("data-echo-placeholder"),i.splice(b,1),a=i.length,b--,h.push(c));0===a&&0===d&&n()},l=function(){clearTimeout(f),f=setTimeout(k,e)},m=function(f){var j=b.querySelectorAll("[data-echo]"),m=f||{},n=parseInt(m.offset||0);c=parseInt(m.offsetBot||n),d=parseInt(m.offsetTop||n),e=parseInt(m.throttle||250),g=!!m.unload,h=[],i=[];for(var o=0;o<j.length;o++)h.push(j[o]);k(),b.addEventListener?(a.addEventListener("scroll",l,!1),a.addEventListener("load",l,!1)):(a.attachEvent("onscroll",l),a.attachEvent("onload",l))},n=function(){b.removeEventListener?a.removeEventListener("scroll",l):a.detachEvent("onscroll",l),clearTimeout(f)};return{init:m,detach:n,render:k}}(this,document);
+window.Echo=function(a,b){"use strict";var c,d,e,f,g,h=[],i=[],j=function(){},k=function(a){var e=a.getBoundingClientRect(),f=e.top>=0&&e.left>=0&&e.top<=(window.innerHeight||b.documentElement.clientHeight)+c&&e.top>=-1*d,g=e.bottom>=-1*d&&e.left>=0&&e.bottom<=(window.innerHeight||b.documentElement.clientHeight)+c;return f||g},l=function(){var a,b,c,d=h.length;if(d>0)for(b=0;d>b;b++)c=h[b],c&&k(c)&&(g&&(c.setAttribute("data-echo-placeholder",c.src),i.push(c)),c.src=c.getAttribute("data-echo"),j(c,"load"),h.splice(b,1),d=h.length,b--);if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!k(c)&&(c.src=c.getAttribute("data-echo-placeholder"),j(c,"unload"),i.splice(b,1),a=i.length,b--,h.push(c));0===a&&0===d&&o()},m=function(){clearTimeout(f),f=setTimeout(l,e)},n=function(f){var k=b.querySelectorAll("[data-echo]"),n=f||{},o=parseInt(n.offset||0);c=parseInt(n.offsetBot||o),d=parseInt(n.offsetTop||o),e=parseInt(n.throttle||250),g=!!n.unload,j=n.callback||j,h=[],i=[];for(var p=0;p<k.length;p++)h.push(k[p]);l(),b.addEventListener?(a.addEventListener("scroll",m,!1),a.addEventListener("load",m,!1)):(a.attachEvent("onscroll",m),a.attachEvent("onload",m))},o=function(){b.removeEventListener?a.removeEventListener("scroll",m):a.detachEvent("onscroll",m),clearTimeout(f)};return{init:n,detach:o,render:l}}(this,document);

src/echo.js

@@ -14,6 +14,12 @@ window.Echo = (function (global, document, undefined) {
    */
   var toBeUnloaded = [];
 
+  /**
+   * callback - initialized to a no-op so that no validations on it's presence need to be made
+   * @type {Function}
+   */
+  var callback = function(){};
+
   /**
    * offsetBot, offsetTop throttle, poll, unload vars
    */
@@ -51,6 +57,7 @@ window.Echo = (function (global, document, undefined) {
             toBeUnloaded.push(self);
           }
           self.src = self.getAttribute('data-echo');
+          callback(self, 'load');
           toBeLoaded.splice(i, 1);
           loadingLength = toBeLoaded.length;
           i--;
@@ -63,6 +70,7 @@ window.Echo = (function (global, document, undefined) {
         self = toBeUnloaded[i];
         if (self && !_inView(self)) {
           self.src = self.getAttribute('data-echo-placeholder');
+          callback(self, 'unload');
           toBeUnloaded.splice(i, 1);
           unloadingLength = toBeUnloaded.length;
           i--;
@@ -92,6 +100,7 @@ window.Echo = (function (global, document, undefined) {
    * @param {Number|String} [obj.offsetBot]
    * @param {Number|String} [obj.offsetTop]
    * @param {Boolean} [obj.unload]
+   * @param {Function} [obj.callback]
    */
   var init = function (obj) {
 
@@ -102,6 +111,7 @@ window.Echo = (function (global, document, undefined) {
     offsetTop = parseInt(opts.offsetTop || offset);
     throttle = parseInt(opts.throttle || 250);
     unload = !!opts.unload;
+    callback = opts.callback || callback;
 
     toBeLoaded = [];
     toBeUnloaded = [];