cache the placeholder on the element

README.md

@@ -49,19 +49,14 @@ The `offsetBot` option allows you to specify how far below the viewport you want
 #### throttle
 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.
+
 #### unload
 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.
 
-#### placeholder
-Type: `String`
-
-When `unload` is enabled it will replace the image's `src` with this value
-
-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.
-
 ## .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

@@ -16,9 +16,9 @@ window.Echo = (function (global, document, undefined) {
   var toBeUnloaded = [];
 
   /**
-   * offsetBot, offsetTop throttle, poll, unload, placeholder vars
+   * offsetBot, offsetTop throttle, poll, unload vars
    */
-  var offsetBot, offsetTop,  throttle, poll, unload, placeholder;
+  var offsetBot, offsetTop,  throttle, poll, unload;
 
   /**
    *  _inView
@@ -47,13 +47,14 @@ window.Echo = (function (global, document, undefined) {
       for (i = 0; i < loadingLength; i++) {
         self = toBeLoaded[i];
         if (self && _inView(self)) {
+          if(unload) {
+            self.setAttribute('data-echo-placeholder', self.src);
+            toBeUnloaded.push(self);
+          }
           self.src = self.getAttribute('data-echo');
           toBeLoaded.splice(i, 1);
           loadingLength = toBeLoaded.length;
           i--;
-          if(unload && !!placeholder) {
-            toBeUnloaded.push(self);
-          }
         }
       }
     }
@@ -62,7 +63,7 @@ window.Echo = (function (global, document, undefined) {
       for(i = 0; i < unloadingLength; i++) {
         self = toBeUnloaded[i];
         if (self && !_inView(self)) {
-          self.src = placeholder;
+          self.src = self.getAttribute('data-echo-placeholder');
           toBeUnloaded.splice(i, 1);
           unloadingLength = toBeUnloaded.length;
           i--;
@@ -92,7 +93,6 @@ window.Echo = (function (global, document, undefined) {
    * @param {Number|String} [obj.offsetBot]
    * @param {Number|String} [obj.offsetTop]
    * @param {Boolean} [obj.unload]
-   * @param {String} [obj.placeholder]
    */
   var init = function (obj) {
 
@@ -103,7 +103,6 @@ window.Echo = (function (global, document, undefined) {
     offsetTop = parseInt(opts.offsetTop || offset);
     throttle = parseInt(opts.throttle || 250);
     unload = !!opts.unload;
-    placeholder = opts.placeholder;
 
     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=[],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=i.length;if(d>0)for(b=0;d>b;b++)c=i[b],c&&k(c)&&(c.src=c.getAttribute("data-echo"),i.splice(b,1),d=i.length,b--,g&&h&&j.push(c));if(a=j.length,a>0)for(b=0;a>b;b++)c=j[b],c&&!k(c)&&(c.src=h,j.splice(b,1),a=j.length,b--,i.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,h=n.placeholder,i=[],j=[];for(var p=0;p<k.length;p++)i.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);
+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);

src/echo.js

@@ -15,9 +15,9 @@ window.Echo = (function (global, document, undefined) {
   var toBeUnloaded = [];
 
   /**
-   * offsetBot, offsetTop throttle, poll, unload, placeholder vars
+   * offsetBot, offsetTop throttle, poll, unload vars
    */
-  var offsetBot, offsetTop,  throttle, poll, unload, placeholder;
+  var offsetBot, offsetTop,  throttle, poll, unload;
 
   /**
    *  _inView
@@ -46,13 +46,14 @@ window.Echo = (function (global, document, undefined) {
       for (i = 0; i < loadingLength; i++) {
         self = toBeLoaded[i];
         if (self && _inView(self)) {
+          if(unload) {
+            self.setAttribute('data-echo-placeholder', self.src);
+            toBeUnloaded.push(self);
+          }
           self.src = self.getAttribute('data-echo');
           toBeLoaded.splice(i, 1);
           loadingLength = toBeLoaded.length;
           i--;
-          if(unload && !!placeholder) {
-            toBeUnloaded.push(self);
-          }
         }
       }
     }
@@ -61,7 +62,7 @@ window.Echo = (function (global, document, undefined) {
       for(i = 0; i < unloadingLength; i++) {
         self = toBeUnloaded[i];
         if (self && !_inView(self)) {
-          self.src = placeholder;
+          self.src = self.getAttribute('data-echo-placeholder');
           toBeUnloaded.splice(i, 1);
           unloadingLength = toBeUnloaded.length;
           i--;
@@ -91,7 +92,6 @@ window.Echo = (function (global, document, undefined) {
    * @param {Number|String} [obj.offsetBot]
    * @param {Number|String} [obj.offsetTop]
    * @param {Boolean} [obj.unload]
-   * @param {String} [obj.placeholder]
    */
   var init = function (obj) {
 
@@ -102,7 +102,6 @@ window.Echo = (function (global, document, undefined) {
     offsetTop = parseInt(opts.offsetTop || offset);
     throttle = parseInt(opts.throttle || 250);
     unload = !!opts.unload;
-    placeholder = opts.placeholder;
 
     toBeLoaded = [];
     toBeUnloaded = [];