Preload Images to Improve Loading Performance

Web applications in general have a problem with images. As soon as an <img /> tag is rendered, the src is requested. But that can take some time and the browser doesn't give us much of an API for what should be displayed during that time (or what to display if it fails to load). But the browse does implement a cache for images if the Cache-Control header is set properly by the server for the image. And if it's cached, then the browser can display the image instantly.

So, let's learn how we can preload the image so when an <img /> tag is rendered, the image is displayed instantly.