How to load all images before showing the page in React?

Admin 1
Viewed 11833

I am trying to find a more modern solution that doesn't use jQuery as I am using React (Gatsbyjs specifically).

I have a website with multiple image carousels that contain high res images.

The issue is the each image carousel only show one image at a time, so only when the user navigates to the next image does the image get fetched, this results in a choppy loading appearance.

I have tried researching online with onLoad and load event listeners but none seem to have worked so far because they only load the image that is currently being shown by the carousel, instead of all of the images in the carousel.

If there is a way to first load all the images, then set the state to true, and only after the state is true, then the rest of the DOM appears onto the screen, that would be perfect.

Any suggestions? Thanks.

Website in question: https://dev--yachtgamechanger.netlify.com/

reactjs javascript
3 Answers
Admin1

I guess that your lib is using lazy load approach. And it's really good when dueling with high res images. You still can change the approach to load all the images before rendering the UI, by going into the carousel component, change the rendering behavior by checking whether all images be loaded or not before render.

Updated: Because you are using gatsby-image, so just use this property: loading: "eager". For EX:

<Img
        fixed={data.file.childImageSharp.fixed}
        alt="Gatsby Docs are awesome"
        loading="eager"
 />

enter image description here https://www.gatsbyjs.org/packages/gatsby-image/

user_47748000

You can ensure that an image is pre-downloaded 100% well before it gets displayed to the screen.

Simply create an Image element and set its src property to the URL where the image is located. Then use the image's onload event to detect when it is ready for instant display.

// Image to Pre-Download:
var image = new Image();
console.time("Image Fully Downloaded in");
image.src = "https://www.nasa.gov/sites/default/files/thumbnails/image/pia24870.jpeg";
image.onload = function()
{
    console.timeEnd("Image Fully Downloaded in");
    console.log("Image is ready for viewing.");
    clearInterval(interval);
    progress.parentNode.replaceChild(btn, progress);
    
}

// Fake Progress Indicator:
let progress = document.createElement("progress");
progress.value = 3;
progress.max = 100;
progress.textContent = "Fake Progress";
document.body.appendChild(progress);
let interval = setInterval(()=>
{
  if (progress.value === 99) 
  {
    progress.value = 0;
  }
  else
  {
    progress.value = progress.value + 1;
  }
},50)

// Button to Replace Progress Indicator:
let btn = document.createElement("button");
btn.textContent = "View Entire Image Instantly";
btn.addEventListener('click',function()
{
  this.parentNode.replaceChild(image, this);
});
img { max-width: 100%; }
<p>Only after the image is completely downloaded, will you see the button to view it:</p>

Based on this concept, you could pre-load/queue as many images as you like into image objects, so that they are ready to be displayed instantly (well before the user decides to view the next image). Here's an example where I'm switching between preloaded images automatically (so fast that it looks like an animated gif -- but it is actually 27 separate images from 27 different URL locations): See statue example and view source.

user_2178670
Related