Browse Source

Merge pull request #40 from raphaeleidus/callback

Add support for a callback to be fired when images are lazy loaded
pull/41/head
Todd Motto 11 years ago
parent
commit
45f22c4a49
  1. 5
      README.md
  2. 11
      dist/echo.js
  3. 2
      dist/echo.min.js
  4. 11
      src/echo.js

5
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:

11
dist/echo.js vendored

@ -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]);

2
dist/echo.min.js vendored

@ -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);

11
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]);

Loading…
Cancel
Save