The mobile image carousel renders every thumbnail with loading="lazy" (T405523), but native lazy loading leaves the preload lookahead entirely up to the browser and exposes no way to tune it. Measured on Titan (moon) with a phone-size viewport: Chrome fetched 6 of the 20 carousel thumbnails at page load (~1.4 MB via the 2x srcset candidates, out of a ~6.5 MB total strip), and its documented lazy-load distance thresholds grow as the connection gets slower — so the readers with the least bandwidth download the most. This network cost was also flagged in the carousel RfC discussion on enwiki.
Technical notes
We should replace the browser-managed deferral with carousel-managed loading: server-render only the first few items with a real src, emit data-src/data-srcset for the rest, and load those from carousel.js via an IntersectionObserver rooted on the carousel's scroll container with a horizontal lookahead of a few tiles.
Acceptance criteria
- At page load, only the initially visible carousel tiles (plus a small lookahead) are fetched, independent of the browser's lazy-loading heuristics
- Scrolling loads tiles progressively before they enter view, a fast fling does not download the tiles it sweeps past, and tapping any tile (loaded or not) opens the correct image in the viewer
- Readers without JavaScript do not see blank carousel tiles
QA steps
Create a page with
For testing image carousel. == Gallery == [[File:174_Red-legged_seriema_in_Encontro_das_Águas_State_Park_Photo_by_Giles_Laurent.jpg|1000px]] [[File:Status_iucn3.1_LC.svg|thumb]] [[File:OOjs_UI_icon_edit-ltr.svg|thumb]] [[File:Cariama_cristata_map.svg|thumb]] [[File:Cariama_cristata_Vienna2008.jpg|thumb]] [[File:Seriamanail_(high_res).jpg|thumb]] [[File:Cariama_cristataPCCA20051227-2025A.jpg|thumb]] [[File:Red-legged_Seriema_RWD1.jpg|thumb]] [[File:Cariama_cristata_(Rotfußseriema_-_Red-legged_Seriema)_-_Weltvogelpark_Walsrode_2013-02.jpg|thumb]] [[File:Cariama_cristata_(Rotfußseriema_-_Red-legged_Seriema)_-_Weltvogelpark_Walsrode_2013-03.jpg|thumb]] [[File:Cariama_cristata_at_Parque_das_Aves_(Foz_do_Iguaçu)-1.jpg|thumb]] [[File:Red-legged_seriema_(Cariama_cristata)_head.JPG|thumb]] [[File:Cariama_cristata_-near_Goiania,_Goias,_Brazil-8.jpg|thumb]] [[File:Commons-logo.svg|thumb]] [[File:Wikispecies-logo.svg|thumb]] [[File:Wikisource-logo.svg|thumb]]
Ensure the first image in the carousel doesn't have a thumbnail URL /width corresponding to a width of 1000px