Dieter: Problem mit Bilder im canvas-Objekt

Hallo,
ich habe ein bisschen mit dem canvas-objekt experimentiert und folgendes Skript geschrieben:

  
<html>  
<head>  
<style>  
</style>  
<script type="application/x-javascript">  
var bilder=new Array("bild1.png","bild2.png","bild3.png");  
t=0; //bilder index  
  
function change_pic(){  
if(t<3){  
	var objectCtx = document.getElementById('my_canvas').getContext("2d");  
	var img = new Image();  
	img.src = bilder[t]; t++;  
	objectCtx.drawImage(img,16,16,256,160);  
	}  
}  
  
</script>  
</head>  
<body>  
<div><canvas id="my_canvas" width="288" height="192"></canvas></div>  
<input type="button" value="x" onClick="change_pic()">  
</body>  
</html>

Wenn ich nun die Funktion change_pic() aufrufe spuckt Firefox folgende Fehlermeldung aus:

Fehler: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: file:///C:/Users/alex/Desktop/snake/canvas.html :: change_pic :: line 15"  data: no]

Wenn ich die Seite dann aktualisiere und erneut die Funtion aufrufe, erscheint das Bild plötzlich. Dafür erscheint die Fehlermeldung wieder, wenn ich mir nun das zweite Bild anzeigen lassen möchte. Wenn ich wieder Aktualisiere erscheint auch das zweite Bild, usw.

Was mache ich falsch?

Beste Grüße
Dieter

  1. hab die Lösung schon selber gefunden. Die Bilder müssen vorgeladen werden, damit man auf sie zugreifen kann.