From da42a9e10b05a02456e1dd5d6f69383d0709933e Mon Sep 17 00:00:00 2001 From: Todd Motto Date: Mon, 2 Dec 2013 22:45:13 +0000 Subject: [PATCH] Echo v1.4.0, throttling and offset options --- README.md | 55 +++++++++++++++++++++++++++++++++++------------- dist/echo.js | 45 ++++++++++++++++++++++++++------------- dist/echo.min.js | 6 +++--- package.json | 4 ++-- src/echo.js | 41 ++++++++++++++++++++++++------------ 5 files changed, 103 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 3637cae..bac5694 100644 --- a/README.md +++ b/README.md @@ -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 -Photo + + + Photo + + + + +``` + +#### .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 `` tag so the DOM tree is populated when the script runs. - -```html - - - - - -``` ## Configuring Echo Add the image that needs to load when visible in a `data-echo` attribute: diff --git a/dist/echo.js b/dist/echo.js index 5eadf57..dfed500 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -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); diff --git a/dist/echo.min.js b/dist/echo.min.js index f7d7a59..d7cfeb9 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -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=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= 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);