Merge pull request #40 from raphaeleidus/callback

Add support for a callback to be fired when images are lazy loaded

README.md

@@ -39,6 +39,11 @@ 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.
 
+#### callback
+Type: `Function`
+
+The callback will be passed the element that has become in view just after the src has been replaced. This can be useful if you want to add a class like `loaded` to the element
+
 ## .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

@@ -10,7 +10,13 @@ window.Echo = (function (global, document, undefined) {
   var store = [];
 
   /**
-   * offset, throttle, poll vars
+   * callback - initialized to a no-op so that no validations on it's presence need to be made
+   * @type {Function}
+   */
+  var callback = function(){};
+
+  /**
+   * offset, throttle, poll, vars
    */
   var offset, throttle, poll;
 
@@ -37,6 +43,7 @@ window.Echo = (function (global, document, undefined) {
         var self = store[i];
         if (self && _inView(self)) {
           self.src = self.getAttribute('data-echo');
+          callback(self);
           store.splice(i, 1);
           length = store.length;
           i--;
@@ -66,6 +73,7 @@ window.Echo = (function (global, document, undefined) {
    * @param {Object} [obj] Passed in Object with options
    * @param {Number|String} [obj.throttle]
    * @param {Number|String} [obj.offset]
+   * @param {Function} [obj.callback]
    */
   var init = function (obj) {
 
@@ -73,6 +81,7 @@ window.Echo = (function (global, document, undefined) {
     var opts = obj || {};
     offset = parseInt(opts.offset || 0);
     throttle = parseInt(opts.throttle || 250);
+    callback = opts.callback || callback;
 
     for (var i = 0; i < nodes.length; i++) {
       store.push(nodes[i]);

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=function(a){var d=a.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(window.innerHeight||b.documentElement.clientHeight)+c},h=function(){var c=f.length;if(c>0)for(var d=0;c>d;d++){var h=f[d];h&&g(h)&&(h.src=h.getAttribute("data-echo"),f.splice(d,1),c=f.length,d--)}else b.removeEventListener?a.removeEventListener("scroll",i):a.detachEvent("onscroll",i),clearTimeout(e)},i=function(){clearTimeout(e),e=setTimeout(h,d)},j=function(e){var g=b.querySelectorAll("[data-echo]"),j=e||{};c=parseInt(j.offset||0),d=parseInt(j.throttle||250);for(var k=0;k<g.length;k++)f.push(g[k]);h(),b.addEventListener?(a.addEventListener("scroll",i,!1),a.addEventListener("load",i,!1)):(a.attachEvent("onscroll",i),a.attachEvent("onload",i))};return{init:j,render:h}}(this,document);
+window.Echo=function(a,b){"use strict";var c,d,e,f=[],g=function(){},h=function(a){var d=a.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(window.innerHeight||b.documentElement.clientHeight)+c},i=function(){var c=f.length;if(c>0)for(var d=0;c>d;d++){var i=f[d];i&&h(i)&&(i.src=i.getAttribute("data-echo"),g(i),f.splice(d,1),c=f.length,d--)}else b.removeEventListener?a.removeEventListener("scroll",j):a.detachEvent("onscroll",j),clearTimeout(e)},j=function(){clearTimeout(e),e=setTimeout(i,d)},k=function(e){var h=b.querySelectorAll("[data-echo]"),k=e||{};c=parseInt(k.offset||0),d=parseInt(k.throttle||250),g=k.callback||g;for(var l=0;l<h.length;l++)f.push(h[l]);i(),b.addEventListener?(a.addEventListener("scroll",j,!1),a.addEventListener("load",j,!1)):(a.attachEvent("onscroll",j),a.attachEvent("onload",j))};return{init:k,render:i}}(this,document);

src/echo.js

@@ -9,7 +9,13 @@ window.Echo = (function (global, document, undefined) {
   var store = [];
 
   /**
-   * offset, throttle, poll vars
+   * callback - initialized to a no-op so that no validations on it's presence need to be made
+   * @type {Function}
+   */
+  var callback = function(){};
+
+  /**
+   * offset, throttle, poll, vars
    */
   var offset, throttle, poll;
 
@@ -36,6 +42,7 @@ window.Echo = (function (global, document, undefined) {
         var self = store[i];
         if (self && _inView(self)) {
           self.src = self.getAttribute('data-echo');
+          callback(self);
           store.splice(i, 1);
           length = store.length;
           i--;
@@ -65,6 +72,7 @@ window.Echo = (function (global, document, undefined) {
    * @param {Object} [obj] Passed in Object with options
    * @param {Number|String} [obj.throttle]
    * @param {Number|String} [obj.offset]
+   * @param {Function} [obj.callback]
    */
   var init = function (obj) {
 
@@ -72,6 +80,7 @@ window.Echo = (function (global, document, undefined) {
     var opts = obj || {};
     offset = parseInt(opts.offset || 0);
     throttle = parseInt(opts.throttle || 250);
+    callback = opts.callback || callback;
 
     for (var i = 0; i < nodes.length; i++) {
       store.push(nodes[i]);