Ladda stor bild vid musklick.

God morgon alla,

Tänkte skapa en funktion som startar en gif animering när man klickar på en bild. Gifanimeringen är 1Mbyte stor så det skulle vara bra om man kunde se till att den inte laddades förens övriga sidan är laddad.

Finns det någon bra strategi för detta senario?

<img OnClick="funStartAnim();" name="ThePictureFrame" align=right border=1 src="animation3_static.gif" width=250>

<script>
function funStartAnim(){
ThePictureFrame.src="animation3.gif"
}
</script>

Jag använder ovan för att starta animeringen. Hur fungerar det? Laddas animation3.gif innan eller först när funktionen köres?

Antar att man inte kan ladda orginalbilden efter att man har kört animationen? Hur vet mitt skript att animationen är klart. Hmmm. Mindre viktigt...

:)

Så här kanske:

<script type="text/javascript">
<!--
var imagesSrc=["animation3.gif"]
	
var imagesOnLoad="document.getElementById('status1').innerHTML='Laddar bilder, '+parseInt(images.loaded/images.toload*100)+'% klart.'";
var imagesOnAllLoaded="document.getElementById('status2').innerHTML='<input type=\"button\" value=\"Kör\" onclick=\"ThePictureFrame.src='animation3.gif';\">'";

var images=new Object();
images.loaded=0;
images.starttime=new Date();
images.toload=imagesSrc.length;
for(i in imagesSrc){
	images[i]=new Image();
	images[i].onload=function(){
		images.loaded++;
		document.getElementById("progressbar").style.width=images.loaded * parseInt(150/imagesSrc.length) +"px";
		if(imagesOnLoad.length>0){ eval(imagesOnLoad); }
		if(images.loaded==images.toload&&imagesOnAllLoaded.length>0){
			images.stoptime=new Date();
			images.loadtime=images.stoptime.getTime()-images.starttime.getTime();
			eval(imagesOnAllLoaded);
		}
	}
	images[i].src=imagesSrc[i];
}
//-->
</script>

<div style="height:10px;width:150px;border:1px solid black;padding:0;margin:0;"><div style="background:blue;width:2px;height:5px;" id="progressbar"></div></div>
<div id="status1"></div>
<div id="status2"></div>

Jag ska prova ovan. JesperT innebär min kod att bilden laddas innan funktionen anropas?

Vad är det i koden på inlägg #857697 som inte fungerar med Mozilla. Det händer inte något när man klickar på bilden. Grr...

REDIGERING: Så här skulle det ju vara...

<script language="JavaScript">
function funStartAnim(){
**document.**ThePictureFrame.src="animation3.gif"
}
</script>

Detta:

function funStartAnim(){
    [b]ThePictureFrame[/b].src="animation3.gif"
}

Istället:

...
document.images["ThePictureFrame"].src = "animation3.gif";
...

:)