Preloader

[Diseina]

hoi hoi...
kann mir jemand sagen, wie ich nen einfachen preloader mache? also das bestimmte sounds oder grafiken für die ganze page vorgeladen werden, und dazu auf einer vorseite so ein balken mit prozentanzeige, wieviel schon geladen ist...

cYa

 

[nickname]

Also, Bilder kann man angeblich vorrausladen lassen, wenn man sie progressiv abspeichert, dann ist es erst in schlechter Qualität zu sehen, und wird dann immer besser, aber der User hat schon was zu gucken, hatte ich mal probiert gehabt, bei mir hat es nicht gelappt, und das Vorrausladen, was Du meinst mit loading Filmchen, geht meines Wissens nur mit Flash, aber ich lasse mich gerne eines Besseren Belehren!
Ansonsten habe ich auf meiner Page auch Sound, der schon so klein wie nur möglich ist, aber trotzdem Schwierigkeiten machte, hab ihn deshalb in einen extra Frame (mit einem oder 0 Pixel, soll man ja nicht sehen!) geladen, damit er nicht immer von vorne mit dem Laden anfängt, sobald der User schon mal was anklicken möchte!

Gruss nickname :|

 

[Christoph]

<script language="JavaScript1.2">
<!-- begin hiding

startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("intro.jpg", "bild1.gif", "bild2.jpg", "bild3.jpg", "images/bild4.jpg") // die zu ladende Bilder
var locationAfterPreload = "irgendwas.php" // wenn der ****** richtig pregeloadet ist dann geht´s da hin
var preloadbarWidth = 250 // Länge des Balkens
var preloadbarHeight = 10 // höhe der Preloadbar
var backgroundOfGradient = "#00000" // Farbe (default)

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "f" 
startingColor[1] = "f"
startingColor[2] = "f"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "f"
endingColor[1] = "f"
endingColor[2] = "f"

//BEI TROUBLESHOOTING:
var gap = 7 // mit den Zahlen herumspielen bis kein JavaScript-Fehler ,mehr kommt (2 ist der minumum wert!!!)


// nichts verändern!!!!!!!!!!

if (!document.all) location.replace(locationAfterPreload)
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) { location.replace(locationAfterPreload); 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 + " images [" + percent + "%].";
		pending--;
		checkLoad();
		return;
	}
	eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
	h++;
	setTimeout("changeto()",1);
}
defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
// end hiding -->
</script>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body bgcolor="#000000">
<center>
  <center class="normal">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><span class="normal">Preloading Images .. </span> </p>
  </center>
  <span class="normal"><br>
  <script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
	document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)"><span class="normal">skip preloading </span></a></small></p></font>')
loadImages();
// end hiding -->
</script>

hoff das hilft!