1363304 - Firefox features landing page should lazy-load images

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, enhancement)

Description

[Alex Gibson [:agibson]]

The new Firefox features landing page holds a collection of thumbnail images for each feature that gets promoted. This list will likely grow considerably, so it would be nice if the page had a method to lazy-load images as the user scrolls down the page. This will help improve page load time considerably as the content expands.

We'll likely need a placeholder image that gets shown until each thumbnail is lazy-loaded, and also some sort of fallback for no-JS users using <noscript>.

Comment 1

[Kohei Yoshino]

Probably with the Intersection Observer API? It will be enabled by default with Firefox 54 as per Bug 1362168.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Comment 2

[Alex Gibson [:agibson]]

(In reply to Kohei Yoshino [:kohei] from comment #1)
> Probably with the Intersection Observer API? It will be enabled by default
> with Firefox 54 as per Bug 1362168.
> 
> https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

I think we'd need something with a little broader cross-browser support for now.

Comment 3

[Alex Gibson [:agibson]]

Hmm, although perhaps the polyfill there may prove robust enough, thanks Kohei will investigate :)

Comment 4

[Alex Gibson [:agibson]]

Attachment: GitHub pull request

Comment 5

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/a3ef273c2eca6247b8340a1d1c3dd9d46c2918cd
[fix bug 1363304] Lazy load Firefox feature thumbnail images

https://github.com/mozilla/bedrock/commit/202f4728edc416975ac0572bfc02bcae73a242de
Merge pull request #4860 from alexgibson/bug-1363304-firefox-features-lazy-load

[fix bug 1363304] Lazy load Firefox feature thumbnail images