Preloading Images to Your Website

Like runners, website owners are always trying to cut their time. A few microseconds can mean the difference between winning the race and being left behind. The word “browse” tends to connote leisure and whiling away the day. In reality, though, we browsers are incredibly impatient. We must have the requested webpage now. We must have this image load now. We must this video stream now. It doesn’t matter if we’re doing research for school or work or just whiling the day away!  Preloading images can help boost speed and compete in the search race.

When you preload an image, you are putting it into the user’s computer memory. That way, it can be accessed more quickly when needed. This is important in terms of speed, and say, if you had a mouseover. You need the image to change without hesitation. So, how do you do it? With some web trickery. Let’s take a look.

If you have one image, you can use the code below to preload it. Paste the code into your document head:

<script>

if (document.images) {

img1 = new Image();

img1.src = “yourimagename.jpg”;

}

</script>

But you want more than one image on your page? All you have to do is add more image lines like so:

<script>

if (document.images) {

img1 = new Image();

img1.src = “yourimagename.jpg”;

img2 = new Image();

img2.src = “yourimagename2.jpg”;

}

</script>

And there you have it. Now those impatient browsers can get what they need and you can have an aesthetically pleasing site. Everyone wins!