Sweet site! Yeah the browser does not download a resource unless it’s visible to the user. What you can do is copy paste these images to the bottom of the website and hide them using Display: None. Then they will be pre-loaded.
Nope, did not work. But please check yourself on the ABOUT page. I added the Section ‘Hide’ to the very bottom and put the hover images inside.
Even when I do not put the section on Display ‘None’. It does not work. I guess the browser does not recognize that it is the same image.
Would we great if we can find a workaround, as it currently hurts the UX of the website.
Oops, you’re right. The reason it didn’t work is because background images and images are hosted on servers, so it’s not the same image. The way to make it the same image is if you create div’s and add the hover images as background images for those divs and make them display none.