Förladda bilder 2 (preload)

Exempel

Loading... 0%  

Kod

<span style="display:inline-block;border:solid black 1px;width:200px;height:16px;padding:1px;font-size:1px;">
<span id="imageloadertext" style="display:inline-block;position:absolute;width:200px;height:16px;text-align:center;font-family:Arial;font-size:12px;">Loading... 0%</span>
<span id="imageloader" style="display:inline-block;background-color:rgb(0,230,0); height:16px; width:0%;"> </span>
</span>
<script type="text/javascript">
var imagesSrc=["/images/testbild001.jpg","/images/testbild002.jpg","/images/testbild003.jpg"];

var imagesOnLoad="document.getElementById('imageloadertext').innerHTML='Loading... '+parseInt(images.loaded/images.toload*100)+'%'; document.getElementById('imageloader').style.width=parseInt(images.loaded/images.toload*100)+'%';";
var imagesOnAllLoaded="document.getElementById('imageloadertext').innerHTML='Loading... Complete.'";

var images=new Object();
images.loaded=0;
images.starttime=new Date();
images.toload=imagesSrc.length;
for(var i in imagesSrc){
	images[i]=new Image();
	images[i].onload=function(){
		images.loaded++;
		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>

Kommentar

Scriptet är en variant av detta script.