{"_id":"echo-js","_rev":"4-f1a144bc14dd34fc753aa35a52d9bdfb","name":"echo-js","description":"Lazy-loading with data-* attributes, offset and throttle options","dist-tags":{"latest":"1.7.3"},"versions":{"1.7.2":{"name":"echo-js","version":"1.7.2","description":"Lazy-loading with data-* attributes, offset and throttle options","author":{"name":"@toddmotto"},"license":"MIT","homepage":"https://github.com/toddmotto/echo","devDependencies":{"gulp":"~3.7.0","gulp-uglify":"~0.3.0","gulp-rename":"~1.1.0","gulp-clean":"^0.2.4","gulp-plumber":"~0.6.2","gulp-header":"^1.0.2","gulp-jshint":"^1.6.1","jshint-stylish":"^0.2.0","gulp-karma":"0.0.4","karma":"^0.12.16","karma-jasmine":"~0.2.0","karma-phantomjs-launcher":"^0.1.4","karma-spec-reporter":"0.0.13"},"spm":{"main":"src/echo.js"},"gitHead":"3bda2b3e7a1d75b76b152e33ec3236019704a454","_id":"echo-js@1.7.2","scripts":{},"_shasum":"42d80e54f42cda8309a30f880d80ef41dcff66b8","_from":".","_npmVersion":"2.12.1","_nodeVersion":"0.12.7","_npmUser":{"name":"jonthanfielding","email":"j.fielding@me.com"},"dist":{"shasum":"42d80e54f42cda8309a30f880d80ef41dcff66b8","tarball":"https://registry.npmjs.org/echo-js/-/echo-js-1.7.2.tgz","integrity":"sha512-vEiw+rMmBKLjcmQ6+9Uhtuhv/etF+5TMQ2yTO9jfMjYe8CwZkxCnvBXuF1G+5uZGHS3OSHm5a1EAQb3cZGRBWw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaXLvGRkpfPFFSwsT+p2UGxkl12ElDpWJ74+K4DYzTfwIgMhcCDFnvF0+cOWhkmoTK8KPldIhoJ2uk2GMqjTlpQas="}]},"maintainers":[{"name":"jonthanfielding","email":"j.fielding@me.com"}]},"1.7.3":{"name":"echo-js","version":"1.7.3","description":"Lazy-loading with data-* attributes, offset and throttle options","author":{"name":"@toddmotto"},"license":"MIT","homepage":"https://github.com/toddmotto/echo","devDependencies":{"gulp":"~3.7.0","gulp-uglify":"~0.3.0","gulp-rename":"~1.1.0","gulp-clean":"^0.2.4","gulp-plumber":"~0.6.2","gulp-header":"^1.0.2","gulp-jshint":"^1.6.1","jshint-stylish":"^0.2.0","gulp-karma":"0.0.4","karma":"^0.12.16","karma-jasmine":"~0.2.0","karma-phantomjs-launcher":"^0.1.4","karma-spec-reporter":"0.0.13"},"main":"src/echo.js","gitHead":"3d2ad199e0db81e592af16e60397adc0d6d0c9ad","_id":"echo-js@1.7.3","scripts":{},"_shasum":"6cf040b4bdd23f950d0432e0283909d3fe90d8f8","_from":".","_npmVersion":"2.12.1","_nodeVersion":"0.12.7","_npmUser":{"name":"jonthanfielding","email":"j.fielding@me.com"},"dist":{"shasum":"6cf040b4bdd23f950d0432e0283909d3fe90d8f8","tarball":"https://registry.npmjs.org/echo-js/-/echo-js-1.7.3.tgz","integrity":"sha512-JqKZ0fpPuuqR5xBiUxc6Sk+PI4xzBzzGdE3jBmHFfmGMU4oufSsE91sA3RI6n1odo0ykmTOfY9l/tGP2M0dkmA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrrZbi4tMo3zT21rnx4Tamb8gvB1eWvamlMLMAcDO6VAiEAr91SiokwA8uzYzgJ+Q0yQ7w/6a2GBWobIo8zm7fKzYU="}]},"maintainers":[{"name":"jonthanfielding","email":"j.fielding@me.com"}]}},"readme":"# Echo.js [](https://travis-ci.org/toddmotto/echo)\n\nEcho is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a [demo](http://toddmotto.com/labs/echo). Echo works in IE8+.\n\n```\nbower install echojs\n```\n\nUsing Echo.js is simple, to add an image directly into the page simply add a `data-echo` attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL.\n\n```html\n\n\n ![\"Photo\"](\"img/blank.gif\")
\n\n \n \n\n```\n\n## .init() (options)\n\nThe `init()` API takes a few options\n\n#### offset\nType: `Number|String` Default: `0`\n\nThe `offset` option allows you to specify how far below, above, to the left, and to the right of 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`.\n\n#### offsetVertical\nType: `Number|String` Default: `offset`'s value\n\nThe `offsetVertical` option allows you to specify how far above and below the viewport you want Echo to _begin_ loading your images.\n\n#### offsetHorizontal\nType: `Number|String` Default: `offset`'s value\n\nThe `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Echo to _begin_ loading your images.\n\n#### offsetTop\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images.\n\n#### offsetBottom\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetBottom` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images.\n\n#### offsetLeft\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetLeft` option allows you to specify how far to left of the viewport you want Echo to _begin_ loading your images.\n\n#### offsetRight\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetRight` option allows you to specify how far to the right of the viewport you want Echo to _begin_ loading your images.\n\n#### throttle\nType: `Number|String` Default: `250`\n\nThe 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.\n\n#### debounce\nType: `Boolean` Default: `true`\n\nBy default the throttling function is actually a [debounce](http://underscorejs.org/#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the images every `throttle` milliseconds, set `debounce` to `false`.\n\n#### unload\nType: `Boolean` Default: `false`\n\nThis option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).\n\n#### callback\nType: `Function`\n\nThe callback will be passed the element that has been updated and what the update operation was (ie `load` or `unload`). This can be useful if you want to add a class like `loaded` to the element. Or do some logging.\n\n```js\necho.init({\n callback: function(element, op) {\n if(op === 'load') {\n element.classList.add('loaded');\n } else {\n element.classList.remove('loaded');\n }\n }\n});\n```\n\n## .render()\n\nEcho'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:\n\n```js\necho.render();\n```\n\nUsing `render()` is also throttled, which means you can bind it to an `onresize` event and it will be optimised for performance in the same way `onscroll` is.\n\n## Manual installation\nDrop 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.\n\n## Configuring Echo\nAdd the image that needs to load when it's visible inside the viewport in a `data-echo` attribute:\n\n```html\n