Preloading images using PHP

Question

Hi,
I am trying to pre-load a few images on a page to save the loading time but seems to be not working in IE7. Here is my code:
<SCRIPT LANGUAGE="JavaScript">
top1 = new Image();
top1.src = "./1.jpg";
top1 = new Image();
top1.src = "./2.jpg";
</script>
This is declared in the HEAD section. But onmouseover still takes a second or two, but once loaded, mouseover is instant. I have an image name called top1, is it because i am loading the same object with 2 different images so will the first image not finish loading?
Also, if I was to include filenames which are dynamic, is there anything stopping me from using PHP code in the HEAD section? or is there a better way to do this?
Thanks in advance.

Answer 1

What you are trying to do has very little to do with PHP, except the generation of the image names in the JavaScript. Once the web page is sent from the server, everything relies on JavaScript. I have created a simple demo on my website at http://foundationphp.com/test/preload.html.
The following script in the head of the page preloads the image:
<script type="text/javascript">
(new Image()).src = "/images/9781430210115.jpg";
</script>
In the body of the page, the rollover is created like this:
<p><img src="/images/9781430216100.jpg" width="130" height="160" alt="Book cover"
onmouseover="this.src='/images/9781430210115.jpg'"
onmouseout="this.src='/images/9781430216100.jpg'" /></p>
Note that the <img> tag has the original image assigned to its src attribute, and the replacement images are specified in the onmouseover and onmouseout event handlers. You cannot do it simply by assigning the preload image to a variable in the head and then assigning that variable name to the image, because the image tag has not been created at the time the script runs.
It sounds to me as though you want to rotate the images. If so, Google "JavaScript image rotator". You should find plenty of solutions.