Add image preloading to lightbox navigation

[egeozcan]

Summary

Implements proactive image preloading in the lightbox component to improve perceived performance when navigating through image galleries. Images ahead of the current position are preloaded in the background using the browser's native Image API.

Key Changes

• Added image preloading state management with three new properties:

  • _preloadedUrls: Set to track which images have been preloaded (prevents duplicate requests)
  • _preloadedImages: Array holding Image object references to keep them in memory
  • _preloadAheadCount: Configurable number of images to preload ahead (defaults to 5)

• Implemented _preloadUpcoming() method that:

  • Preloads the next N images based on _preloadAheadCount
  • Only preloads images (skips other content types)
  • Uses async decoding to avoid blocking the main thread
  • Implements a memory cap to prevent unbounded growth during long sessions (maintains 6x the preload count)

• Integrated preloading into navigation flow by calling _preloadUpcoming() at key points:

  • When opening/initializing the lightbox
  • When navigating to the next item
  • When navigating to the previous item
  • When loading additional pages in paginated galleries

Implementation Details

• Uses native Image objects with decoding='async' for non-blocking preloading
• Maintains a Set of preloaded URLs to avoid redundant network requests
• Implements a FIFO cache eviction strategy to cap memory usage while retaining recently preloaded images
• Only preloads images that match the isImage() content type check

https://claude.ai/code/session_01Q5kMwNZQipPztAShGoyLw1