Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a demo. Echo works in IE8+.
bower install echojs
Using 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.
<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,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
// echo.render(); is also available for non-scroll callbacks
</script>
</body>
The init() API takes a few options
Type: Number|String Default: 0
The 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.
Type: Number|String Default: offset's value
The offsetVertical option allows you to specify how far above and below the viewport you want Echo to begin loading your images.
Type: Number|String Default: offset's value
The offsetHorizontal option allows you to specify how far to the left and right of the viewport you want Echo to begin loading your images.
Type: Number|String Default: offsetVertical's value
The offsetTop option allows you to specify how far above the viewport you want Echo to begin loading your images.
Type: Number|String Default: offsetVertical's value
The offsetBottom option allows you to specify how far below the viewport you want Echo to begin loading your images.
Type: Number|String Default: offsetVertical's value
The offsetLeft option allows you to specify how far to left of the viewport you want Echo to begin loading your images.
Type: Number|String Default: offsetVertical's value
The offsetRight option allows you to specify how far to the right of the viewport you want Echo to begin loading your images.
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.
Type: Boolean Default: true
By default the throttling function is actually a 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.
Type: Boolean Default: false
This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).
Type: Function
The 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.
echo.init({
callback: function(element, op) {
if(op === 'load') {
element.classList.add('loaded');
} else {
element.classList.remove('loaded');
}
}
});
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:
echo.render();
Using 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.
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.
Add the image that needs to load when it's visible inside the viewport in a data-echo attribute:
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.
MIT license
FAQs
Lazy-loading with data-* attributes, offset and throttle options
The npm package echo-js receives a total of 217 weekly downloads. As such, echo-js popularity was classified as not popular.
We found that echo-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.