javascript - How to load all images before showing the page in React? - Stack Overflow

admin管理员组

文章数量:1344240

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: /

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--yachtgamechangerlify./

• javascript
• reactjs

Share Improve this question Follow asked Mar 25, 2020 at 10:38 user11834465user11834465

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

As Lonnie Best said, I ended up using Promise.all() to capture the loads of the images.

Just in case anyone else want to check it out: https://codesandbox.io/s/react-image-preload-ptosn

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 ponent, 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"
 />

https://www.gatsbyjs/packages/gatsby-image/

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 pletely 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.

本文标签： javascriptHow to load all images before showing the page in ReactStack Overflow