Use react state to load images dynamically.

Assemble an array of image addresses, and save it in a state , and then load your images in useEffect hook.

import React, { useState, useEffect } from "react";

export default function GameObject(props) {
  const [images, setImages] = useState();
  const [trackeImage, trackeImage] = useState(0);
  let imageArray = ["img1.png", "img2.jpg", "img3.gif"];

  useEffect(() => {
    let interval = setInterval(() => {
      setImages(preStats => {
        return [...preStats, imageArray[trackeImage]];
      });
      trackeImage(preStats => {
        return preStats + 1;
      });
    }, 1000);

    if(interval && trackeImage >= imageArray.length)
        clearInterval(interval);


    return () => {
      if(interval)
        clearInterval(interval);

    }
  });

  return (
    <div>
      {images.map(image => (
        <img src={image} alt="loading"/>
      ))}
    </div>
  );
}

I’m not sure how well-supported that priority hint feature is across browsers.

What I’d suggest is to explicitly avoid creating the img tag for lower-priority images (i.e. those that are still below the bottom of the visible area). You could even defer loading them at all until the user scrolls to the point where they’re visible (or about to be visible).

Here’s a similar question (pure JS, but you can use the same trick).

I don’t think importance exists yet

In fact this report is dated only 5 days ago – https://wicg.github.io/priority-hints/

Even in the latest chrome

‘src’
in new Image()

true

‘importance’ in new Image()

false

I’m building a react application which displays a product for an ecommerce site. This product page will display a set of images to the user, on desktop these are rendered as a 2 x 2 grid, but on mobile they show as a single image, and the user can scroll horizontally through them.

This is a problem on mobile devices with poor internet connectivity, as when the component is mounted the browser triggers a fetch for all n images simultaneously with the same priority.

Since all these fetch calls trigger simultaneously, they are contending with each other and it can lead to cases where the first image is loaded last, and the user is stuck looking at a loading icon waiting for the first image to load; even if the remaining images have loaded but are not yet visible.

Ideally I’d like to somehow tag my first image as highest priority and then allow the others to load on low priority.

I’ve seen the google document on priority hints, but it doesn’t seem to be having any effect. Does anyone have any idea how this can be done, or if it’s even possible at the moment?