3 Ways to help you Preload imagesWritten by Abdulrehman on February 10th, 2009
Often you need to preload images for a specific ‘on-event’ action such as a mouse-over. Rather than waiting for the image to be downloaded once the cursor is placed on the mouse-over button you can preload the image to carry out the effect smoothly. An example of preloaded image is the hover effect on the menu on the top of this page. The hover images of the menu buttons will be preloaded with the page so that when you place your mouse over it, it is already in the cache. Now, I will share 3 ways to preload images and the logic behind each.
Preloading the Javascript way
This is what you paste in the javascript for preloading:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
preload_image_object = new Image();
image_url = new Array();
image_url[0] = “http://www.demo.net/folder/image0.gif”;
image_url[1] = “http://www.demo.net/folder/image0.png”;
image_url[2] = “http://www.demo.net/folder/image0.jpg”;
image_url[3] = “http://www.demo.net/folder/image0.png”;
var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
//–>
</SCRIPT>
You can add as much images as you want by adding to the array but also remember to increase the loop accordingly. This preload was generally the first way to preload images and is still being used widely, but somehow with time this has become very ineffective although it is not completely discouraged to use it.
Preloading the Classical Way
The reason why I’m calling it classical is because it involves simple HTML and just a little bit of CSS, first you add this to your stylesheet:
#preload-img { display:none }
Then you add this to somewhere near the bottom of your page:
<div id="preload-img">
<img src="http://www.demo.com/images/hover.jpg" height="1" width="1"/>
<img src="http://www.demo.com/images/hover2.png" height="1" width="1"/>
</div>
I would recommend this way because this is the one that I am using on my blog. You can check it’s functionality by moving your cursor over the menu at the top and see that it works smoothly. It is simply because you are loading the image directly on the page through HTML and then hiding it with your smartness when you make it almost invisible using CSS and the height and width attributes of the image. Your page would never completely load without these images because they are a part of it. In the example code above there are only 2 images, however you can add more and change their image sources accordingly.
Using jQuery Script to preload images
I usually do not recommend my readers to try something which I have not tried myself, but because I’m covering the topic, it would be incomplete if I didn’t tell you about this technique. To be brief, the jQuery Script preloads all images which are located in your CSS stylesheet, which can save a lot of time. I’m not using it on any of my sites, so I’ll just give you a link to the place where I learned about this technique. It has the full source code and instructions to help your preload images. Here it is:
Preloading is a great technique, in fact one of those which you learn when you start coding a full website yourself and learn new designing skills. Have fun playing around with preloading images.
Related Articles:
9 People have expressed themselves on“3 Ways to help you Preload images”
Leave a Reply
Often you need to preload images for a specific ‘on-event’ action such as a mouse-over. Rather than waiting for the image to be downloaded once the cursor is placed on the mouse-over button you can preload the image to carry out the effect smoothly. An example of preloaded image is the hover effect on the menu on the top of this page. The hover images of the menu buttons will be preloaded with the page so that when you place your mouse over it, it is already in the cache. Now, I will share 3 ways to preload images and the logic behind each.
Preloading the Javascript way
This is what you paste in the javascript for preloading:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
preload_image_object = new Image();
image_url = new Array();
image_url[0] = “http://www.demo.net/folder/image0.gif”;
image_url[1] = “http://www.demo.net/folder/image0.png”;
image_url[2] = “http://www.demo.net/folder/image0.jpg”;
image_url[3] = “http://www.demo.net/folder/image0.png”;
var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
//–>
</SCRIPT>
You can add as much images as you want by adding to the array but also remember to increase the loop accordingly. This preload was generally the first way to preload images and is still being used widely, but somehow with time this has become very ineffective although it is not completely discouraged to use it.
Preloading the Classical Way
The reason why I’m calling it classical is because it involves simple HTML and just a little bit of CSS, first you add this to your stylesheet:
#preload-img { display:none }
Then you add this to somewhere near the bottom of your page:
<div id="preload-img">
<img src="http://www.demo.com/images/hover.jpg" height="1" width="1"/>
<img src="http://www.demo.com/images/hover2.png" height="1" width="1"/>
</div>
I would recommend this way because this is the one that I am using on my blog. You can check it’s functionality by moving your cursor over the menu at the top and see that it works smoothly. It is simply because you are loading the image directly on the page through HTML and then hiding it with your smartness when you make it almost invisible using CSS and the height and width attributes of the image. Your page would never completely load without these images because they are a part of it. In the example code above there are only 2 images, however you can add more and change their image sources accordingly.
Using jQuery Script to preload images
I usually do not recommend my readers to try something which I have not tried myself, but because I’m covering the topic, it would be incomplete if I didn’t tell you about this technique. To be brief, the jQuery Script preloads all images which are located in your CSS stylesheet, which can save a lot of time. I’m not using it on any of my sites, so I’ll just give you a link to the place where I learned about this technique. It has the full source code and instructions to help your preload images. Here it is:
Preloading is a great technique, in fact one of those which you learn when you start coding a full website yourself and learn new designing skills. Have fun playing around with preloading images.
I am Abdulrehman Agha, the guy behind 3arn.Net. I am 16 years old, study in grade 10 and live in Pakistan. I started this blog in the hope of making money on the internet, sharing my computer experiences and proving that despite many barriers, one can make money on the internet.
Copyright © 2007 - 2010 
Thanks for being one of my top 10 entrecard droppers for the month of January 2009.
God bless!
[Reply To This Comment]
jQuery seems to be the most used
Fast, simple, elegant.
[Reply To This Comment]
Thanks for the tip
[Reply To This Comment]
I’m technically challenged and these kinds of tips really help. Thanks.
[Reply To This Comment]
Another way is to use one image and use CSS events to move it.
[Reply To This Comment]
Hello there, thanks for the visit. hope ur having a nice day.
[Reply To This Comment]
Thanks for such a detailed and comprehensive explanation about image.
[Reply To This Comment]
you seems very innovative designer means you having much idea about designing as my designing weak, i like the way you providing some tremendous useful stuffs quite useful to me or many other people.
[Reply To This Comment]