rob: Preload

Beitrag lesen

hi, das is ein preloader den ich benutze, hab ich im web gefunden und bissl verändert, weiß nicht wie browserkompatibel der is, aber damit kannst du alle vorhanden bilder vorladen...

<html>
<head>

<title>indexPreload</title>
</head>
<body >
<br><br><br><br><br><br><br><br><br><br>
<b><p align="center" id="status" >loading...</p></b>
<script language="JavaScript">
<!-- begin hiding

startingColor = new Array();
endingColor = new Array();

//hier die bildpfade eintragen
var yourImages = new Array("pimp.gif","cigs.gif","dice.gif","gang.gif","girl.gif","glas.gif");

//einstellungen für den ladebalken
var preloadbarWidth=250;
var preloadbarHeight=5;
var backgroundOfGradient = "#FF7F7F";

startingColor[0] = "f";
startingColor[1] = "f";
startingColor[2] = "0";

endingColor[0] = "c";
endingColor[1] = "0";
endingColor[2] = "0";

var gap = 7;

var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff=new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen=yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);

for (i = 0; i < 3; i++) {
        startingColor[i] = startingColor[i].toLowerCase();
        endingColor[i] = endingColor[i].toLowerCase();
        startingColor[i] = eval(startingColor[i]);
        endingColor[i] = eval(endingColor[i]);
        diff[i] = (endingColor[i]-startingColor[i])/num;
        ones[i] = Math.floor(diff[i]);
        sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i=0; j=0;
while (i<=num) {
        hilite[i]="#";
        while (j<3) {
                hilite[i]+=convert[startingColor[j]];
                hilite[i]+=convert[endingColor[j]];
                startingColor[j]+=ones[j];
                endingColor[j]+=sixteens[j];
                if (endingColor[j]>15) {
                        endingColor[j]-=15;
                        startingColor[j]++;
                }
                j++;
        }
        j=0;
        i++;
}
function loadImages() {
        for (i = 0; i < imgLen; i++) {
                preImages[i]=new Image();
                preImages[i].src=yourImages[i];
                loaded[i]=0;
                cover[i]=Math.floor(num/imgLen)*(i+1)
        }
        cover[cover.length-1]+=num%imgLen
        checkLoad();
}
function checkLoad() {
        if (pending) { changeto(); return }

if (currCount==imgLen) {

//**********************WENN FERTIG GELADEN******************************************
        document.getElementById("status").innerText="page launched";

window.setTimeout("window.open('index2.html' , '_self' )",2000); return; }
//***********************************************************************************
        for (i=0; i<imgLen; i++) {
                if (!loaded[i] && preImages[i].complete) {
                        loaded[i]=1; pending++; currCount++;
                        checkLoad();
                        return;
                }
        }
        setTimeout("checkLoad()",10);
}
function changeto() {
        if (h+1>cover[currCount-1]) {
                var percent=Math.round(100/imgLen)*currCount;
                if (percent>100) while (percent!=100) percent--;
                if (currCount==imgLen&&percent<100) percent=100;
                defaultStatus="Loaded "+currCount+" out of "+imgLen+" datafields[" + percent + "%].";
                pending--;
                checkLoad();
                return;
        }
        document.getElementById("cell"+(h+1)).style.backgroundColor=hilite[h];
        h++;
        setTimeout("changeto()",1);
}
//***************TEXT FÜR DIE STATUSZEILE VOM BROWSER*********************
defaultStatus="Loaded 0 out of "+imgLen+" datafields[0%].";
//**************************************************************************
document.write('<table align="center" border="0" cellpadding="0" cellspacing="0" width="250px"><tr height="5px" bgcolor=#0000FF>');
for (i=0; i<num; i++) {
        document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');

loadImages();
// end hiding -->
</script>
</body>
</html>