playground
/
echo
mirror of https://github.com/toddmotto/echo.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

add some documentation to README.md

pull/39/head
RaphaelEidus 11 years ago
parent
9792c08351
commit
ca782a2c69
4 changed files with 31 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      README.md
  2. 3
      dist/echo.js
  3. 2
      dist/echo.min.js
  4. 3
      src/echo.js

27
README.md
Unescape View File

@ -12,12 +12,12 @@ Using Echo.js is simple, just add the image you wish to load to a `data-echo` a
<body> <body>
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg"> <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
<script src="dist/echo.js"></script> <script src="dist/echo.js"></script>
<script> <script>
Echo.init({ Echo.init({
offset: 100, offset: 100,
throttle: 250 throttle: 250,
}); });
// Echo.render(); is also available for non-scroll callbacks // Echo.render(); is also available for non-scroll callbacks
@ -32,11 +32,32 @@ The `init()` API takes a few options
#### offset #### offset
Type: `Number|String` Default: `0` Type: `Number|String` Default: `0`
The `offset` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below the viewport, use `1000`. The `offset` option allows you to specify how far below and above the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`.
#### offsetTop
Type: `Number|String` Default: `offset`'s value
The `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images.
#### offsetBot
Type: `Number|String` Default: `offset`'s value
The `offsetBot` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images.
#### throttle #### throttle
Type: `Number|String` Default: `250` Type: `Number|String` Default: `250`
#### 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. 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 ## .render() API

3
dist/echo.js vendored
Unescape View File

@ -105,6 +105,9 @@ window.Echo = (function (global, document, undefined) {
unload = !!opts.unload; unload = !!opts.unload;
placeholder = opts.placeholder; placeholder = opts.placeholder;
toBeLoaded = [];
toBeUnloaded = [];
for (var i = 0; i < nodes.length; i++) { for (var i = 0; i < nodes.length; i++) {
toBeLoaded.push(nodes[i]); toBeLoaded.push(nodes[i]);
} }

2
dist/echo.min.js vendored
Unescape View File

@ -1,2 +1,2 @@
/*! Echo v1.5.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ /*! 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 j=b.querySelectorAll("[data-echo]"),k=f||{},n=parseInt(k.offset||0);c=parseInt(k.offsetBot||n),d=parseInt(k.offsetTop||n),e=parseInt(k.throttle||250),g=!!k.unload,h=k.placeholder;for(var o=0;o<j.length;o++)i.push(j[o]);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=[],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);

3
src/echo.js
Unescape View File

@ -104,6 +104,9 @@ window.Echo = (function (global, document, undefined) {
unload = !!opts.unload; unload = !!opts.unload;
placeholder = opts.placeholder; placeholder = opts.placeholder;
toBeLoaded = [];
toBeUnloaded = [];
for (var i = 0; i < nodes.length; i++) { for (var i = 0; i < nodes.length; i++) {
toBeLoaded.push(nodes[i]); toBeLoaded.push(nodes[i]);
} }

Write Preview
Loading…
Cancel
Save