Image preloading - how to be sure the images are loaded

[Foamcow]

Hi,

I've written a simple script to randomly swap the background image of an element on my page after a set number of seconds.

My problem is that although I am initiating the preload of the images within the script, the change function may be called before the images have finished preloading.

Forgive the code if it's a bit lumpy, I've not done much Javascript for a very long time! Just getting back into it.

here are my basic functions (from an external file)

function startTimer(secs) {
	setTimeout("randomBGchange()",secs*1000);
}


function preloadImages(){
	//array of background images
	
	var preload_image_object = new Image();

	//preload the images stored in BGimages array - defined on page
	var i = 0;
	for(i=0; i<=BGimages.length; i++) {
		preload_image_object.src = BGimages[i];
	}
	startTimer(10);
	return true;
}


function randomBGchange() {	
	//pick a random image
	newBGimage=parseInt(Math.random()*BGimages.length);
	//element we wish to change the background of
	var content = document.getElementById('content');
	//change the background
	content.style.backgroundImage="url("+BGimages[newBGimage]+")";
	
	startTimer(3);
}

And I have this in the page itself

<script type="text/javascript" charset="utf-8">
	var BGimages = new Array();
	BGimages[BGimages.length] = "images/homepage/area51.jpg";
	//BGimages[BGimages.length] = "images/base/sshw_Bisque-Hi-res.jpg";
	BGimages[BGimages.length] = "images/homepage/realItBG.jpg";
	BGimages[BGimages.length] = "images/homepage/innopackBG.jpg";
	BGimages[BGimages.length] = "images/homepage/clockBG.jpg";

	addLoadEvent(preloadImages);
</script>

The addLoadEvent function is a tried and tested thing that simply adds a function to a list that gets executed once the page is loaded. It's so I can have multiple things going off for the onload event.


The process goes as follows:
the body.onload event triggers preloadImages(), which takes the array defined in the page itself and begins preloading the images.
How can I make the script wait until the images are fully loaded before it returns from that preload function?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[BillyRayPreachersSon]

You'll probably have to use an event-driven model here... so wait until the "onload" event of each image has fired before calling a known callback function - which then continues with any setup, etc.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Thanks Dan...

I nearly understood that too
hehe

Nah, I know what you mean but I'm unsure how to actually do it. Can you offer any help there?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Foamcow]

Hmm.. I think I get it.

So I could do something like

if(BGimages[1].onload && BGimages[2].onload){
 startTimer(10);
}

but neater, obviously!

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[kaht]

You could probably use global variables to track the state of each image, and then have a function that each image calls and sets it's own global variable when it's finished. At the end you could check all the variables to make sure they're true - which would mean all images have loaded. Here's a rough example:

<script type="text/javascript">

var img1Finished = false;
var img2Finished = false;
var img3Finished = false;

function areWeDoneYet(num) {
   if (num == 0) {
      img1Finished = true;
   }
   else if (num == 1) {
      img2Finished = true;
   }
   else if (num == 2) {
      img3Finished = true;
   }
   if (img1Finished && img2Finished && img3Finished) {
      alert("We're all done");
      return true;
   }
   return false;
}

</script>


<img src="..." onload="areWeDoneYet(0)" />
<img src="..." onload="areWeDoneYet(1)" />
<img src="..." onload="areWeDoneYet(2)" />

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[BillyRayPreachersSon]

Yes - you'd have to call the onload event explicitly - testing for its presence would always show something - any associated function.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Is there a javascript function that generates a large spike I can ram my head on to? :|

I will crack this!

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2