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 DanielG
  • 06.10.2006 - 13:10

Hi cosmicmatrox. Gutes Script! Tutorial ist wohl eher schlecht. Weiter so... Gruß Daniel

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.09.2006 - 08:49

HI! ich weiß nich ob du das slebst geschrieben hast aber wenn dann möchte ich dir gratulieren. Es ist ein sehr nützliches skipt, aber ich gebe allen recht. der lerneffekt ist nicht wirklich geben da man ja nur kopiert. eine schrittweise erklärung oder kommentierung würde den lerneffekt erhöhen.
mfg
Shiva

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.09.2006 - 23:41

wenn man sich alles durchdenkt kann man schon etwas lernen

Portrait von sYnux
  • 21.09.2006 - 20:56

JAWOOOOOOOOOOOL!!!!
tHX genau das bruach ich!
da meine page sich immer so langsam aufbaut und es shice aussieht wenn die so stückweise aufgebaut wird!
klasse wärs noch wenn du noch die einzelnen befehle erklären könnte damit man auch lernt wie das geht und nicht einfach nurn kopiert!

Portrait von Stormnatt
  • 21.09.2006 - 04:30

Hab es angetestet, Ist ganz net ich hab da nur was falsch gemacht beim anpassen aber das ist kein problem finde es schon hilfreich.

so long

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.08.2006 - 21:30

Super! Auch wenn man es nur kopiert ;) Aber ist prima erklärt :) Auch für einen Einsteiger..

Portrait von stef0511
  • 15.08.2006 - 14:40

Danke sowas hat auf meiner Homepage noch gefehlt!

Vielen Dank sag ich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.08.2006 - 14:36

jo da muss ich wAldii recht geben kein lern effekt aber trotzdem gefällt mir ganz gut ... da kann man aber auch noch net was ändern, wenn man das script schon hat...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.08.2006 - 14:11

da mal garnichts versteh sry

Portrait von Adrighanis
  • 26.07.2006 - 19:53

jo hat endlich geklappt danke für deine hilfen aber 2 sachen gehen noch nicht :D
1. ich bekomm unten links bein IE gezeigt wieviel prozent geladen hat aber der balken zeigt den fortschritt net an
2. wenn er alle bilder geladen hat macht er keine umleitung auf die index.html :S

Portrait von cosmicmatrox
  • 26.07.2006 - 06:38

Versuchs mit - ("Bilder/aboutme.jpg","Bilder/am_ich.jpg","Bilder/askin_yolu.jpg","Bilder/atsch.gif", - dann klappts auch mit dem Prelader ;o)

Portrait von Adrighanis
  • 25.07.2006 - 20:12

asoooooooo danke das wusste ich nicht ^^
okay oha-. das ist viel zu viel arbeti :D aber es lohnt sich dann^^danke für die hilfe :-)

Portrait von cosmicmatrox
  • 25.07.2006 - 17:54

Yep,
erst den Pfad, dann die Bilder mit Endung.


z.B. bilder/menü1.gif, bilder/menü2.gif, usw

Portrait von Adrighanis
  • 25.07.2006 - 17:41

asoo jetzt hab ich es verstande.
muss ich jetzt sozusagen ALLE bilder die auf meiner HP sind da rein schreiben damit dieser preloader funktioniert?

Portrait von Adrighanis
  • 26.07.2006 - 00:19

so hab aber ne letze frage :)
http://adrighanis.ad.funpic.de/v2/preload.html
kannste ya ma gucken was da falsch sit bitte -.-
1. der balken starten nicht
2. hab alle bilder rein getan also in die script
3. der macht keine umleitung -.-
was hab ich da falsch gemacht?

(hab am am code nix verändert außer das mit den bilder und die umleitung auf index.html.

Portrait von Adrighanis
  • 25.07.2006 - 12:32

Ya erstma THX fürs geile code kann man immer gut gebrauchen aber fehlt die eklärung-.-
zB wie mach ich den balken den du da hast? also das es zeigt das die seite geladen wird?
und du hast da "images/bild.gif" was ist das denn fürn bild? bzw was fürn bild muss man da benutzen?
Ich würd mich freuen wenn mir einer helfen könnte.

Portrait von cosmicmatrox
  • 25.07.2006 - 16:12

Tut mir leid für alle die, die es nicht wirklich verstehen.
Dachte erklärt sich von selbst.

Also bei:
("images/bild.gif",")
gibt man die Bilder an, die man vorladen will.

Dies:
var locationAfterPreload = "index.php"
gibt die Seite an, die er laden soll, wenn die Bilder fertig geladen sind.

Und hier:
var preloadbarWidth = 200
var preloadbarHeight = 10
var backgroundOfGradient = "#ffffff"startingColor[0] = "0"
gibt man z.B. die Grösse und die Farben des Balkens an.


Wenn noch Fragen sind ... :o)

Gruss Jörn

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.07.2006 - 21:03

super beschrieben :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.06.2006 - 11:55

Jo das is krass...kann man gut gebrauchen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.06.2006 - 10:47

Endlich ma so ein preloader... hab ma en script runtergeladen aber war net so gut das teil :D Fett ty
Hab lang gebraucht bis es geklappt hat aber es ging

Mehr anzeigen

x
×
×