(Broken out while working on T404378 perf related bits)

Currently we are not using any lazy-loading on the carousel or scroll-view/vtoc thumbnails, which means the browser loads them immediately after they're set up in the DOM. On pages with many images, this will cause a large flood of downloads on initial page view for the carousel thumbs, then a second flood of downloads when opening the overlay -- exactly the time when we want to spend bandwidth downloading the high-res detail image.

Recommended fix: use the browser-native HTML lazy-loading feature by adding loading="lazy" attributes to the carousel and visual toc thumbnails, plus width and height attributes for the visual toc thumbnails to ensure they lay out correctly before loading.

Expected results:

• this will reduce total download time to interactive carousel
• this will reduce download time of detail view (because it need not fight thumbnails for bandwidth)
• when scrolling aggressively, user may encounter thumbs in temporary loading state with a gray background

Open questions for design:

• is it ok to use the browser-native progressive rasterization display during loading, or should we manage our own loading state with an icon overlay?

QA steps:

• In Chrome developer tools, set network throttling to "3G" or "slow 4G" to simulate a constrained mobile network, and "disable cache" for the worst-case scenario on every load
• Ensure that all visible carousel images load as expected
• Scroll in the carousel to confirm they start loading in as you scroll
• Click on loaded carousel thumbs to ensure they load up the correct image
• Click on unloaded carousel thumbs to ensure they also load up the corrrect image (though may not yet have the background color ready)
• With overlay open, scroll down to confirm that images start to load in
• Click on loaded vtoc images to ensure they load the correct image
• Click on unloaded vtoc images to ensure they load the correct image

Requirement

Scope: Image Browsing (carousel + VTOC thumbnails).

• Carousel and VTOC thumbnails must lazy-load using the browser-native loading="lazy" attribute.
• Thumbnails must include width and height attributes so that layout is stable before images load.
• Lazy-loading must reduce bandwidth competition, improving time-to-interactivity and large image detail view performance.
• Thumbnails must still load correctly when scrolled into view or clicked, even if they were not previously loaded.

BDD

Feature: Lazy-loading carousel and VTOC thumbnails

  Scenario: Carousel thumbnails lazy-load
    Given I open an article with Image Browsing enabled
    When I scroll through the carousel
    Then thumbnails are only loaded when they come into view
    And layout remains stable with defined width and height

  Scenario: VTOC thumbnails lazy-load
    Given I open the image overlay with the VTOC
    When I scroll down
    Then thumbnails are only loaded when they come into view
    And layout remains stable with defined width and height

  Scenario: Clicking thumbnails
    Given a thumbnail is visible but not yet loaded
    When I click the thumbnail
    Then the correct full image loads in the detail view
    And the lazy-loaded thumbnail continues loading in the background

Test Steps

Test Case 1: Carousel lazy-loading

1. In Chrome DevTools, throttle network to "3G" or "Slow 4G" and disable cache.
2. Open an article with many images in the carousel.
3. AC1: Only visible carousel thumbnails load immediately.
4. Scroll horizontally through the carousel.
5. AC2: Thumbnails load only as they come into view.
6. AC3: Layout remains stable (no content jump).

Test Case 2: VTOC lazy-loading

7. Open the image overlay and scroll down through the VTOC.
8. AC4: Only visible thumbnails load immediately.
9. AC5: Thumbnails load as they scroll into view.
10. AC6: Layout remains stable (no content jump).

Test Case 3: Clicking loaded/unloaded thumbnails

11. In the carousel, click a loaded thumbnail.
12. AC7: The correct image opens in the detail view.
13. In the carousel, click a thumbnail that has not yet loaded.
14. AC8: The correct image still opens in the detail view.

QA Results - Patchdemo