How to Preload Images without Javascript?

Question

In one of My Layout there are some large images (come from XML) which shown when I mouse hover on some some of the link, but when the Page loads and when i rollover It takes time to Load that Image.

Note: there are fix 5 images (not dynamic)

I dont want to use JavaScript to Preload Images any Solutions?

I am Not Using Hover menu or something like that, but this Images are Product Images and the links are Text link Got my Point??

Answer 1

HTML5 has a new way to do this, by link prefetching.

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /> 

Just add many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.

Note Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch

UPDATE

If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image; 

Answer 2

From http://snipplr.com/view/2122/css-image-preloader

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.

#preloadedImages {     width: 0px;     height: 0px;     display: inline;     background-image: url(path/to/image1.png);     background-image: url(path/to/image2.png);     background-image: url(path/to/image3.png);     background-image: url(path/to/image4.png);     background-image: url();  }