Pre-loading GIF images on page opening?

Hey guys, and thx in advance for the help !

I have a portfolio website with the main page being just a gallery of images.

Once you hover on the different images I have a little code that will replace the image by an animated GIF.
The problem is that even with a very fast connection all the different images are loaded and displayed on the website opening but it seems the GIFs are not pre-loaded on the opening of the page and are trying to load ONLY when the mouse is hovering them, leading to a black frame for an instant which is not very fluid.

Even if you let the page charge for 5mins when you will hover the images you'll see only then it start to load the GIF.

I would love to have a possibility to pre-load the different GIF images so that when the user is hovering them they are displayed without any latency.

My website is here : https://camillemarotte.com/

Thx a lot !

Ha nice, it seems to work !

So I guess I apply the same to all images then?

12 hours ago, Aerion said:

Ha nice, it seems to work !

So I guess I apply the same to all images then?

Yes. But you can use this shorter code

/* this code will apply all items */
a.grid-item .grid-image-inner-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
a.grid-item:hover img {
    opacity: 0;
}
/* you can edit below code */
a.grid-item[href="/films/director-reel-2024"] .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif);
}
a.grid-item[href="/films/director-reel-2024"]:hover img {
    opacity: 0;
}

Thx, it helps a lot 😉

Quick question, in my current configuration, is there any way to have the same final effect but using videos instead of GIF?

Using video is much more complicated, because we cannot insert video through CSS code as above.
You will need to use JavaScript code, insert the video tag into each item, then use the same CSS above to achieve the effect. And you may need to set all videos to autoplay, which can make the site run very slow.

If you search on forum, there are some threads with code to do this.

2 hours ago, tuanphan said:

Using video is much more complicated, because we cannot insert video through CSS code as above.
You will need to use JavaScript code, insert the video tag into each item, then use the same CSS above to achieve the effect. And you may need to set all videos to autoplay, which can make the site run very slow.

If you search on forum, there are some threads with code to do this.

Got it, thx !