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

Echo v1.4.0, throttling and offset options

pull/6/merge
Todd Motto 11 years ago
parent
8743bff34f
commit
da42a9e10b
5 changed files with 103 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      README.md
  2. 45
      dist/echo.js
  3. 6
      dist/echo.min.js
  4. 4
      package.json
  5. 41
      src/echo.js

55
README.md
Unescape View File

@ -1,13 +1,49 @@
# Echo [![Build Status](https://travis-ci.org/toddmotto/echo.png)](https://travis-ci.org/toddmotto/echo)
Echo is a standalone JavaScript lazy-loading image tool. Echo is fast, less than 1KB and uses HTML5 data-* attributes. Echo works in IE8+.
Echo is a standalone JavaScript lazy-loading image tool. Echo is fast, less than 1KB and uses HTML5 data-* attributes. Check out a [demo](http://toddmotto.com/labs/echo). Echo works in IE8+.
Using Echo.js is simple, just add the image you wish to load to a `data-echo` attribute.
```html
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
<body>
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
Echo.init({
offset: 100,
throttle: 250
});
// Echo.render(); is also available
</script>
</body>
```
#### .init() API (options)
The `init()` API takes a few options
#### offset
Type: `Integer` 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`.
#### throttle
Type: `Integer` 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.
### .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:
```js
Echo.render();
```
## Demo
Check out a [demo of Echo](http://toddmotto.com/labs/echo).
Using `render()` is also throttled, which means you can bind it to a `window.onresize` event and it will be optimised for performance in the same way `window.onscroll` is.
## Installing with Bower
To install Echo into your project using Bower, use the GitHub repository hook:
@ -18,17 +54,6 @@ bower install https://github.com/toddmotto/echo.git
## Manual installation
Drop your files into your required folders, make sure you're using the file(s) from the `dist` folder, which is the compiled production-ready code. Ensure you place the script before the closing `</body>` tag so the DOM tree is populated when the script runs.
```html
<body>
<!-- html content above -->
<script src="dist/echo.js"></script>
<script>
// call Echo.js
Echo.init();
</script>
</body>
```
## Configuring Echo
Add the image that needs to load when visible in a `data-echo` attribute:

45
dist/echo.js vendored
Unescape View File

@ -1,6 +1,6 @@
/*!
* Echo v1.3.0
* Lazy-loading images with data-* attributes
* Echo v1.4.0
* Lazy-loading with data-* attributes, offsets and throttle options
* Project: https://github.com/toddmotto/echo
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
@ -9,33 +9,48 @@ window.Echo = (function (window, document, undefined) {
'use strict';
var store;
var store = [], offset, throttle, poll;
var _inView = function (img) {
var coords = img.getBoundingClientRect();
return (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight);
var _inView = function (el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
};
var _pollImages = function () {
for (var i = 0; i < store.length; i++) {
for (var i = store.length; i--;) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
if ([].indexOf && [].slice.call(store).indexOf(self) !== -1) {
[].slice.call(store).splice(i, 1);
}
store.splice(i, 1);
}
}
};
var init = function () {
store = document.querySelectorAll('[data-echo]');
_pollImages();
window.onscroll = _pollImages;
var _throttle = function () {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function (obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
};
return {
init: init
init: init,
render: _throttle
};
})(window, document);

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

@ -1,8 +1,8 @@
/*!
* Echo v1.3.0
* Lazy-loading images with data-* attributes
* Echo v1.4.0
* Lazy-loading with data-* attributes, offsets and throttle options
* Project: https://github.com/toddmotto/echo
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
*/
window.Echo=function(a,b){"use strict";var c,d=function(c){var d=c.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(a.innerHeight||b.documentElement.clientHeight)},e=function(){for(var a=0;a<c.length;a++){var b=c[a];d(b)&&(b.src=b.getAttribute("data-echo"),[].indexOf&&-1!==[].slice.call(c).indexOf(b)&&[].slice.call(c).splice(a,1))}},f=function(){c=b.querySelectorAll("[data-echo]"),e(),a.onscroll=e};return{init:f}}(window,document);
window.Echo=function(a,b){"use strict";var c,d,e,f=[],g=function(d){var e=d.getBoundingClientRect();return(e.top>=0&&e.left>=0&&e.top)<=(a.innerHeight||b.documentElement.clientHeight)+parseInt(c)},h=function(){for(var a=f.length;a--;){var b=f[a];g(b)&&(b.src=b.getAttribute("data-echo"),f.splice(a,1))}},i=function(){clearTimeout(e),e=setTimeout(h,d)},j=function(e){var g=b.querySelectorAll("[data-echo]"),h=e||{};c=h.offset||0,d=h.throttle||250;for(var j=0;j<g.length;j++)f.push(g[j]);b.addEventListener?a.addEventListener("scroll",i,!1):a.attachEvent("onscroll",i)};return{init:j,render:i}}(window,document);

4
package.json
Unescape View File

@ -1,10 +1,10 @@
{
"name": "Echo",
"version": "1.3.0",
"version": "1.4.0",
"homepage": "https://github.com/toddmotto/echo",
"author": "Todd Motto",
"year" : "2013",
"description": "Lazy-loading images with data-* attributes",
"description": "Lazy-loading with data-* attributes, offsets and throttle options",
"author": {
"name": "Todd Motto",
"email": "todd@toddmotto.com",

41
src/echo.js
Unescape View File

@ -2,33 +2,48 @@ window.Echo = (function (window, document, undefined) {
'use strict';
var store;
var store = [], offset, throttle, poll;
var _inView = function (img) {
var coords = img.getBoundingClientRect();
return (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight);
var _inView = function (el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
};
var _pollImages = function () {
for (var i = 0; i < store.length; i++) {
for (var i = store.length; i--;) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
if ([].indexOf && [].slice.call(store).indexOf(self) !== -1) {
[].slice.call(store).splice(i, 1);
}
store.splice(i, 1);
}
}
};
var init = function () {
store = document.querySelectorAll('[data-echo]');
_pollImages();
window.onscroll = _pollImages;
var _throttle = function () {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function (obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
};
return {
init: init
init: init,
render: _throttle
};
})(window, document);

Write Preview
Loading…
Cancel
Save