Question 1

How to lazy load background images with Echo.js?

Accepted Answer

Use the `data-echo-background` attribute on elements, and Echo.js will swap the background image URL when it enters the viewport, as shown in the README examples for simple integration.

Question 2

Echo.js vs native lazy loading: which should I use?

Accepted Answer

Echo.js is better for legacy browser support (IE8+) and offers granular control with offsets, but native `loading='lazy'` is simpler and built-in for modern browsers without extra JavaScript.

Question 3

How to handle images added dynamically with Echo.js?

Accepted Answer

Call `echo.render()` manually after adding new images to trigger lazy-loading, since scroll events might not detect them automatically; this is essential for single-page apps or filter layouts.

Question 4

Can Echo.js unload images to save memory?

Accepted Answer

Yes, set `unload: true` in the init options to remove images from the DOM when they scroll out of view, conserving resources, though it's disabled by default to avoid flickering.

Question 5

What's the best throttle setting for Echo.js performance?

Accepted Answer

The default 250ms is a good balance; adjust based on scroll intensity—higher values reduce overhead but may delay loading, while lower values increase responsiveness at a cost.

Question 6

How to add a loading class with Echo.js callbacks?

Accepted Answer

Use the callback function in init to add or remove classes based on the operation, e.g., `element.classList.add('loaded')` on load, as demonstrated in the README for custom styling.

echo

What is echo?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions