Some of you might use the :hover pseudo-class in CSS to change out an image, for example a lit up version of a close-button.
You might also have noticed that there may may be a short delay before it loads in, making the button go blank for a split-second.
This happens, because the browser waits with loading that image until it is needed. When viewing the page, it isn't needed as appears nowhere ... until you hover over that button.
Suddenly the image IS needed, and the browser goes to load it which is not instantanious. While the image isn't loaded, the place where it is supposed to go is left blank.
The delay is made up of two main time-consumers: Fetching the image from a server and rendering/decompressing it. Only the fist part is sped up by this, but tiny icons should take very little time to decode.
You can tell the browser that an image is important and will be needed later with a link tag and rel="prefetch". An example code-snippet is given below.
This will cause the browser to load it in advance, removing the delay of fetching it from the server. The decoding delay will still be there.
If you target very old browsers like InternetExplorer 10 and below or Apples very good and problem-free shitware browser called "Safari" which does not support prefetch, you will have to use a hack:
A img-tag with the style display:none; will still cause the browser to load the image, as it is "used" in the page. Just including it anywhere in the body of the html will work.
<head>
<!-- The proper way -->
<link href="bigpic2.png" rel="preload" as="image" type="image/png">
</head>
<body>
<!-- <img> tag hack -->
<img src="bigpic3.png" style="display:none;">
</body>
Press Ctrl+F5 to force-reload the page and clear its cache. Wait for it to completely load (little spinner in address bar should disappear). Hover over the images and compare times.
After you have hovered over an image once, repeat the above steps to experience the delay again.
The images are quite big (6.8MB) PNGs, wich take a noticable time to decode. A small icon or a JPG would not suffer from such a long decoding delay,
