Förladda bilder 2 (preload)

 

Exempel

Loading... 0%

Script

<span style="border: solid black 1px;width:200px; padding:1px;font-size:1px;">
<span id="imageloadertext" style="position:absolute;width:200px;text-align:center;font-family:Arial; font-size:12px;">Loading... 0%</span>
<span id="imageloader"style="background-color:rgb(0,230,0); height:14px; width:0%;"></span>
</span>
<script type="text/javascript">
var imagesSrc=["/images/testbild1.jpg","/images/testbild2.jpg","/images/testbild3.jpg","/images/testbild4.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.

Tillbaks