Share your repls and programming experiences

← Back to all posts
Image Load Delay
MidhunSureshR (0)

Issue

The image carousel in RunYourEventSection loads new pairs of images with asymmetric delays that is unpleasant. The issue also affects the tab menu in SpaceOverviewSection.

Cause

The dynamic image content is stored as an array of image links. This array is then passed to the components as props.
The index to the array is maintained using react hooks.

const [currentImageIndex, setCurrentImageIndex] = useState(0);

When the index changes, the component is rendered and the src attributes are changed to reflect the new image urls.

The delays in loading of the images are a result of the browser refetching the image from the URL. This process is nondeterministic and therefore the delays are different each time.

Repeated usage of the carousel results in the browser storing the images in the cache; reducing the amount of delay in further interactions.

Solution

  • Store the images as blob objects in firebase db. Store the array of blobs in memory and create the local URL for the images using:
    URL.createObjectURL(blob);
  • Precompute the array of blobs from image links using fetch.
    This is illustrated in the code sample.