toddmotto/echo

Echo.js is a small JavaScript library, around 2 kilobytes, that handles lazy-loading of images on a web page. Lazy-loading means images are not downloaded when the page first loads but are instead loaded only when the user scrolls close to them. This keeps initial page loads fast, especially on pages with many images. The setup is minimal. Instead of putting the real image URL in a standard src attribute, you put a placeholder image there and put the real URL in a custom data-echo attribute. Echo.js watches the page as the user scrolls and swaps in the real image when that element comes into view. For background images applied via CSS, a separate data-echo-background attribute works the same way. Configuration is done through an init function with a handful of options. The offset setting controls how far outside the visible area an image should start loading, so you can preload images slightly before they scroll into view. A throttle option (250 milliseconds by default) controls how often the scroll position is checked so the page does not slow down from too many checks during fast scrolling. There is also an unload option that removes images from memory once they scroll back out of view, which can help on very long pages. A callback function lets you run custom code each time an image loads or unloads, for example to add a CSS class for a fade-in animation. Echo.js also exposes a render method for situations where images need to be checked without any scrolling happening, such as when a filter on a page rearranges content. The library is licensed under MIT and works in browsers as old as Internet Explorer 8.