Tutorial Preloading-Image

Preloading-Image

Sollte die eigene Seite über eine Dateigröße von 100kb inkl. aller Grafiken kommen, so ist ein Preloader zu empfehlen, welcher alle Grafiken der Seite vorauslädt. Für Besucher mit DSL stellen 100kb kein Problem dar, allerdings gibt es noch sehr viele User mit Modem oder ISDN, die dann geschlagene 15 - 20 Sekunden dem langsamen und bruchstückhaften Aufbau der Seite zusschauen müssen.
Durch den Preloader jedoch sehen sie, dass die Seite im Hintergrund aufgebaut wird und der Aufbau wird ihnen über einen Fortschritt-Balken in Prozent angezeigt. Ist das Dokument inkl. aller Grafiken geladen, und hat der Fortschritt-Balken 100% erreicht, wird der Besucher automatisch auf die Seite geleitet, und diese ist nun schon komplett aufgebaut und zusammengesetzt.
Des Weiteren hat der Besucher die Möglichkeit, den Preload-Vorgang zu stoppen, und durch Klicken des Links "Skip" sofort auf die Seite zu gelangen.

Tutorial lesen (30 Pkt.)

Code:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="main.css">
<SCRIPT language=JavaScript1.2>
startingColor = new Array()
endingColor = new Array() var yourImages = new Array
("images/bild.gif",")
var locationAfterPreload = "index.php"
var preloadbarWidth = 200
var preloadbarHeight = 10
var backgroundOfGradient = "#ffffff"startingColor[0] = "0"
startingColor[1] = "0"
startingColor[2] = "0"endingColor[0] = "0"
endingColor[1] = "0"
endingColor[2] = "0"var gap = 3
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>
<style type="text/css">
<!--
.Stil1 {color: #CCCCCC}
.Stil2 {color: #FFFFFF}
-->
</style>
</HEAD>
<body link="#000000" vlink="#000000" alink="#000000" text="#000000" bgcolor="#373737" topmargin="0" leftmargin="0">
<TABLE height="100%" width="100%">
<TBODY>
<TR>
<TD>
<CENTER>
<p><span class="Stil1">Preloading Images</span><BR>
<SCRIPT language=JavaScript1.2>
<!-- beging hiding
document.write('<table border="1" bordercolor="#485266" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
document.write('<td bordercolorlight="75A0BD" bordercolordark="75A0BD" width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
loadImages();
// end hiding -->
</SCRIPT>
<A href="index.php" class="Stil2">skip</A>
</p>
</CENTER></TD></TR></TBODY></TABLE></BODY></HTML>

Ihr könnt die preload.html nach euren Vorstellungen gestalten. Zum Schluss jedoch den nachfolgenden Table, der in der Code-Box steht, in die Datei mit einbinden und alle Angaben für Farbe, Schrift, etc. an euer Design anpassen.
Nun wird z. B. von einer Startseite, die eure Homepage vielleicht hat, statt bisher direkt auf eure Contentseite nun auf die preload.html verlinkt. Solltet ihr keine gesonderte Startseite haben, sondern eure index.html die direkte Content-Seite darstellen, so sollte diese Seite zukünftig durch die preload.html ersetzt werden. D.h. die preload.html in index.html umbenennen und eure ursprüngliche index.html in z. B. main.html oder home.html und den Link entsprechend im Preloader Script abändern.

Grundsätzlich sollte der Link-Ablauf wie folgt ausschauen:
1. Bei einer Homepage mit Start- oder Eingangsseite:
Startseite (index.html) -> Preloader-Seite (preload.html)-> Contentseite (z.B. main.html)

2. Bei einer Homepage ohne bisherige Start- oder Eingangsseite:
Preloader-Seite (index.html) -> Contentseite (z.B. main.html)