Heroes Overview

The thumbnails do not take long to load. If you click on a thumbnail, a page with a larger version of the image is displayed. If the larger image is not in the cache, the morph effect looks bad. To avoid this, we can retrieve the larger image in advance by using the loader function of the astro:before-preparation event.

The extended version calls the original loader and then preloads the hero image after checking the newDocument for the source.

If the larger images are not in your cache, the page may appear to be unresponsive to your click. It would be a good idea to show a loading indicator to signal that the click has been detected, but it takes a second for the next page to occur.

1
document.addEventListener('astro:before-preparation', e => {
2

3
  if (e.from.href.endsWith('/overview/')) {
4
    const originalLoader = event.loader;
5
    event.loader = async () => {
6
      await originalLoader();
7
      const img = new Image();
8
      img.src = event.newDocument.querySelector('img[class*="hero"]').src;
9
      await new Promise((resolve) => {
10
        img.onload = img.onerror = resolve
11
      });
12
    };
13
  }
14
});