Best ways to preload images ?

Question

Hi !

So i did this little thing for the 30th Web Anniversary. Though in this project, i add 30 gifs to the DOM with JS and of course performances are quiet bad so i wonder what would you do to improve that with only CSS or/and Vanilla JS ?

https://code.sololearn.com/W1Y8VdYTA53X

Answer 1

Ok i did some improvements, i believe. I think i understand why but if i'm telling bs, please correct me :

I was actually using the load event to run my init function inside wich all my javascript code is and therefore the part that creates the HTML containing my images too.

Though the load event detects a fully-loaded page (stylesheets and images included). So when we run the code, there is a consequent time before we see the boxes because the Javascript is not running until the full page is loaded.

Now, i replace the load event by the DOMContentLoaded event that fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets and images.

So it's already better and we see the boxes sooner than when i used the load event.

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

Answer 2

To answer to the initial question and after some research, this article seems to summarize the techniques to do it with css only or pure js.

https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/