Preload images with HTML&CSS
HTML CSS Quick
In this quick tip we're going to show you how to preload images with simple HTML and CSS. Preloading images is useful when you have background-images
that are only shown when you hover over an element. These images are often not preloaded by the browser and therefore you will have to wait for them to load when you
hover over an element for the first time. Our simple solution solves the problem.
HTML
Of course you have to change the values for src, height, width and alt to the ones you need.
Now that we added the <img> tag, which "preloads" our image, we
want to hide it.
CSS
That's it. You can leave out visibility:hidden; and
opacity:0;. We added it to show you more hiding options than just
display:none;.
