have a image fullscreen and a loader

[Thecazz]

Hi
This is my first time I post a question here :)

Now to my problem.

I have now a page that I can easy change the background image and it look good.

The problem is that most of my pictures is big and I like to have a loader/preloader when I change background but I have no idea how to do it.

The code I have now is.

<script type="text/javascript">
function showimage(myimage) 
{
document.getElementById('background').src = myimage+'.jpg';
}
</script>

and the HTML

<A HREF="javascript:showimage('image1');">Change image 1</A>

Everything work fine but have no loader so it take sometime before the image show and that is not good

[whoisgregg]

Welcome to WebmasterWorld, Thecazz!

To preload images using Javascript, you create a new Image() object, then update the src value with the different images you want preloaded.

Untested sample code:

preload_images = new Image();
image_url = [];
image_url[0] = "http://example.com/image0.jpg";
image_url[1] = "http://example.com/image1.jpg";
var image_url_length = image_url.length;
for(var i=0; i<=image_url_length; i++){
preload_images.src = image_url[i];
}

If you run into trouble implementing this, just post back with a description of what's happening/not happening and we'll do our best to help. :)

[Thecazz]

Thanks, going to try that