Is there a way to preload image in React? I have a component with images and the images start to load just when the component is used
maybe try looking into these resources
happy coding 
Thanks, but I think I didn’t know how to implement it, if you open my project and go to step 2, you will see that the icons start loading only when the component from step 2 is “used” and if you open the console you will see that there is an error regarding to the link you gave me from stackoverflow, could you review it and tell me what I did wrong?
You should push your React code, not just the build output, that way people can install and test it.
https://github.com/LifeAsDev/multi-step-form/
Try importing the images. Pretty sure you have to import the assets if they are not in the public folder.
I don’t really know why you would need to preload the images as they are just small SVG icons. I would suggest you inline them.
the problem is that if i am in step 3 and i go back to step 2 the images should be loaded again, you can notice it because when you go to step 2 the images take a few seconds to display
It doesn’t and shouldn’t take “a few seconds”. I’m seeing an average of 6ms load time for the SVGs. Also, when you go back the images are loaded from the cache.
Anyway, my point about importing the assets still stands. But like I said, I would just inline them.
can you explain “inline”?
instead of “img.src=some_string” try using “img element” instead, perhaps thats what Iasjorg meant by it
but if lasjorg checked my project, I’m sure he would have noticed that I’m already using img elements for the svg, what you say still doesn’t make sense
By inline I mean using the SVG code itself.
All the browser has to do is render it without having to fetch it as a file first. It won’t get cached but it also won’t have any initial fetch delay. On super low-powered devices it might be slower but I have never seen a benchmark for it (also the SVG would have to be bigger than a small icon).
Here is one of the icons.
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd"><circle cx="20" cy="20" r="20" fill="#483EFF"/><path fill="#FFF" fill-rule="nonzero" d="M26.666 13H13.334A3.333 3.333 0 0 0 10 16.333v7.193a3.447 3.447 0 0 0 2.14 3.24c1.238.5 2.656.182 3.56-.8L18.52 23h2.96l2.82 2.966a3.2 3.2 0 0 0 3.56.8 3.447 3.447 0 0 0 2.14-3.24v-7.193A3.333 3.333 0 0 0 26.666 13Zm-9.333 6H16v1.333a.667.667 0 0 1-1.333 0V19h-1.333a.667.667 0 0 1 0-1.334h1.333v-1.333a.667.667 0 1 1 1.333 0v1.333h1.333a.667.667 0 1 1 0 1.334Zm7.333 2a2.667 2.667 0 1 1 0-5.333 2.667 2.667 0 0 1 0 5.333ZM26 18.333a1.333 1.333 0 1 1-2.667 0 1.333 1.333 0 0 1 2.667 0Z"/></g></svg>
Again, it would help if you pushed the source code. Right now all you have in the repo is the initial code and the gh-pages branch.
thanks I have the code of SVGs, you are right I don’t push the source code of any of my projects just the build
when you have icon on your project you dont worry about the delay?, on my project I have a checkmark icon when I click the checkmark button the checkmark icon show but with delay
Now the source code is in the repo, edit my first comment to add this?
They are tiny files. I have not seen a delay for the checkmark and only a bit of a delay a single time with the other icons (out of maybe 10 tries). Any such delay is likely just GitHub pages related. Put it on Netlify or Vercel if you are that concerned about the performance.
It is a SPA, the client has to download way more JS code than all the icons combined. If you import the SVGs they will be part of the bundle so they are inside the code the client needs to initially download just to run the app.
thanks for the help
bappyasif and lasjorg
- you are using an imgae constructor, i meant that you could directly use "<img src={“some string”} />
happy coding