Merge pull request #40 from raphaeleidus/callback

Add support for a callback to be fired when images are lazy loaded
11 years ago · 45f22c4a49
4 changed files with 27 additions and 4 deletions
--- a/README.md
+++ b/README.md
@ -12,7 +12,7 @@ Using Echo.js is simple, just add the image you wish to load to a `data-echo`  a
 <body>

  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
-  
+
  <script src="dist/echo.js"></script>
  <script>
  Echo.init({
@ -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:
--- a/dist/echo.js
+++ b/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]);
--- a/dist/echo.min.js
+++ b/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);
--- a/src/echo.js
+++ b/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]);