Anzeige
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)


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Rabbit_2
  • 03.06.2012 - 15:49

Hallo,
ich habe ein paar Probleme, ich weiß nicht so genau was ich ändern muss, damit ich den Preloader eingebunden bekomme.
besteht der Preloader wirklich nur aus dem obigen Code? oder muss ich noch Dateien anlegen? wegen der Zeile hier? type="text/css" href="main.css"
Der Ladebalken erscheint auch schon gar nicht.
Muss ich nur den Pfad zu den Bildern angeben oder alle Bilder mit Pfad?
ich hoffe mir kann einer helfen ;-)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.05.2012 - 17:18

Super tut. Mit ein paar Veränderungen kann jeder es auf seiner Seite einsetzen.

Portrait von HardBassCel
  • 22.11.2011 - 12:49

also bei mir will das nicht so klappen wie es hier beschrieben ist :(

entweder ich verstehe etwas falsch oder kp woran es liegt :(

ich bitte um hilfe

Portrait von HardBassCel
  • 22.11.2011 - 12:09

also ich finde es cool, denn dann muss man nicht ewig zugucken, wie die bilder sich nach und nach ergeben

Portrait von takat
  • 18.11.2011 - 02:19

vielen dank... hab ich nun verstanden

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 14.08.2011 - 09:30

Danke^^
Das Script wird auf meiner Seite zum Einsatz kommen, allerdings ein wenig verändert ;)

Portrait von simalosa
  • 21.02.2011 - 10:00

Danke für die Mühe. Ob Tut, Tipps oder Tricks, leider für Anfänger zu schwere Kost. Dennoch Danke.

Portrait von Elpresidente99
  • 15.12.2010 - 08:37

Super genau richtig für seiten mit viel bildern :).

Portrait von Batlh
  • 25.10.2010 - 17:30

klasse ding, allerdings denke ich nicht, dass noch sooo viele ohne DSL untewegs sind

Portrait von cosmicmatrox
  • 29.10.2010 - 06:29

Danke :)<br>
Hast aber auch gesehen, dass ich das Script schon vor fast 5 Jahren hier eingestellt habe. :o)

Portrait von Jormungand
  • 01.09.2010 - 09:08

Eine Introseite, bzw. vorgeschaltete Seite ist so ziemlich tödlich für SEO.

Portrait von F1reF0x
  • 21.07.2010 - 14:23

super sache genau so was hab ich gesucht danke ;)

Portrait von Soloner
  • 06.06.2010 - 15:04

Sehr gutes Tutorial zum Einstieg eine gute Anleitung

Portrait von bamdiewurst
  • 21.01.2010 - 18:44

TUt nicht, aber nen gutes Script :)

Portrait von booyakadesign
  • 08.01.2010 - 21:57

Also ich find das Tutorial nciht wirklich hilfreich, schade, denn gerade über das Thema hätte ich gerne mehr gewusst.

Portrait von cosmicmatrox
  • 29.10.2010 - 06:34

Das ist auch kein TuT, sondern es ist in der Kategorie Tips und Tricks. Es sollte und soll nur aufzeigen was möglich ist. Mittlerweile wird man es nicht mehr wirklich brauchen, aber 2006 fand auch ich es nützlich.

Portrait von barnet
  • 08.01.2010 - 11:38

Gerade für Lernende hervorragend. Auch wenn es eine gewissen Schwierigkeitsgrad hat. Aber gerade das ist ja das Herausfordernde für Beginners.

MfG
G. Barnet

Portrait von sno0z
  • 07.12.2009 - 22:22

Als TUT würde ich es auch nicht gerade bezeichnen. Aber danke fürs reinstellen.

Portrait von bsv24
  • 05.12.2009 - 14:59

Garnicht so cool für Anfänger. "Tutorial" nenne ich andere Dinge...

Portrait von laluna
  • 19.11.2009 - 01:10

Der Titel hört sich vielversprechend an - für mich aber leider zu kompliziert. Es fehlen auch die Erklärungen, das ist doch der Sinn eines Tutorials. Oder???

x
×
×