Question 1

How to lazy load images with progressive enhancement using JavaScript?

Accepted Answer

Use Lazy Progressive Enhancement by wrapping images in <noscript> tags and calling loadMedia(). It extracts images from noscript, preserves attributes, and ensures fallbacks for users without JavaScript, as shown in the Basic Usage section.

Question 2

Lazy Progressive Enhancement vs lazysizes: which is better for standards compliance?

Accepted Answer

Lazy Progressive Enforcement excels in standards compliance by enforcing valid HTML via noscript tags, whereas lazysizes might use data-src attributes that can be invalid. However, lazysizes offers more features like intersection observer support and a larger ecosystem.

Question 3

Does Lazy Progressive Enhancement work with React or Vue?

Accepted Answer

It can work, but integration may be clunky since it's vanilla JS and requires manual noscript markup. For React/Vue, built-in lazy loading or libraries like react-lazyload might be more convenient due to framework-specific optimizations.

Question 4

How to implement scroll-based lazy loading with this function?

Accepted Answer

Pass true as the third parameter to loadMedia (e.g., loadMedia(null, null, true)) to enable scroll-triggered loading. However, note that it uses a basic scroll solution, and custom implementations might be needed for better performance.

Question 5

Is Lazy Progressive Enhancement accessible for screen readers?

Accepted Answer

Yes, it maintains accessibility by preserving alt attributes and other image properties from noscript tags. Since it outputs standard <img> tags, screen readers can interpret them normally, aligning with its focus on valid HTML.

Question 6

Can I use it with iframes as mentioned in the README?

Accepted Answer

Yes, the README states it works with iframes by placing them inside noscript tags. This allows lazy loading of iframes while keeping fallbacks, though setup is similar to images and may require additional testing for compatibility.

Question 7

What are the performance impacts of using noscript tags for lazy loading?

Accepted Answer

Noscript tags add extra DOM elements but are lightweight; the main performance concern is the scroll handling, which isn't as optimized as intersection observers. For high-performance sites, custom scroll logic or waiting for intersection observer support might be better.

Lazy Progressive Enhancement

What is Lazy Progressive Enhancement?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions