Tutorialbeschreibung

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.


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)


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von crashibln
  • 13.06.2006 - 15:21

grandioses teil ;-) suchte ich schon ne ganze weile!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.06.2006 - 23:44

kann nicht jemand ein besser beschriebenes TuT schreiben?
wo mann alles einfügt ich chekcke hier infach garnix!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.06.2006 - 17:33

is doch ganz informativ!!

Portrait von thunderstick
  • 03.06.2006 - 14:29

Find ich klasse, da ich sowas bislang immer nur in flash gesehen habe unn nicht in javascript!
LOB!

Portrait von septic
  • 30.05.2006 - 10:35

is nützlich, aber nicht das edelste was ich je gesehen hab ;)

Portrait von freakk1985
  • 11.05.2006 - 17:55

hey cool, genau das hab ich gesucht ;) dickes dankeschön..ist sehr gut erklärt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.05.2006 - 13:37

Mit Vorkenntnissen lässt sich das Nachbauen!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.05.2006 - 07:00

Nenene das geht ja wohl gar nicht ^^
Wie schon 100 mel erwähnt... das ist kein Tutorial!
+ als anfänger weis man nicht was wie machen... also bei mir funztz ned :(

Portrait von cosmicmatrox
  • 10.05.2006 - 07:11

Tja, dann haste was falsch gemacht,
Bei mir funzt es.

Gruss

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.05.2006 - 10:35

kann man gut gebrauchen,thx

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.05.2006 - 18:02

Schöner Code aber ich bin Anfänger und habe wirklich fast gar nichts gecheckt!
Das ist kein Tutorial sondern einfach Code kopieren...

mfg
lordyoda

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.04.2006 - 21:48

nicht schlecht dein tutorial.Wollte mal fragen wier man da sein logo verwenden kann und statt diese striche zahlen kommen greetz mama
p.s. bäääääääää

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.04.2006 - 14:12

Finde ich super kann ich auch klasse auf meiner
Site gebrauchen

Portrait von enno-san
  • 04.04.2006 - 17:44

TOP dieses TUT bei mir sind leider viele Seiten sehr groß, aber nun....

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.04.2006 - 23:00

wusste gar net dass sowas möglich ist...

Portrait von kleinerVampir
  • 31.03.2006 - 17:33

Für Einsteiger absolut ungeeignet, da absolut NICHTS erklärt wird. Weder was wo passiert, noch die einfachsten und dennoch wichtigsten Sachen, wie z.B. wo trage ich was ein (speziel meine Bilder) , bzw. was kann ich wie und wo verändern. Selbst Fortgeschrittene dürften bei der Anordnung des Codes zu tun haben , das alles auseinander zu fummeln. Ich meine damit, dass man bei der Erstellung doch wenigstens in einem Tut die Übersichtlichkeit an erste Stelle setzen sollte.

Für SKH: such dir den Abschnitt ("images/bild.gif",")
dort musst du deine Bilder eintragen

FAZIT:

Für Anfänger total unnütz, da keinerlei Erklärung vorhanden ist. Für Fortgeschrittene absolut unübersichtlich strukturiert. Und für ein Tutorial würde ich sagen total am Thema vorbei, da es kein Tutorial ist, sondern ehr ein lieblos hinkopierter Code.

Portrait von SKH
SKH
  • 24.03.2006 - 12:56

Wunderbare Sache ... aber wo geb ich eine, welche images ich preloaden möchte?

Portrait von cosmicmatrox
  • 24.03.2006 - 14:52

startingColor = new Array()
endingColor = new Array() var yourImages = new Array
<b>("images/bild.gif",")</b>
var locationAfterPreload = "index.php"

Portrait von djvolume
  • 17.03.2006 - 17:09

Dankeschön genau so habe sowas habe ich gesucht :) SUPI

Portrait von Blade
  • 15.03.2006 - 19:43

also das script ist ja schon ok, aber da das hier ja eigentlich ein workshop sein soll, find ich es viel zu mager erklärt... wie wAldii schon gesagt hat, man hat null lerneffekt, da man es nur kopiert...

Mehr anzeigen

x
×
×