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 voci
  • 30.05.2008 - 10:15

danke hat mir sehr geholfen!!weiter so

Portrait von Rokks
  • 23.05.2008 - 04:56

Steht doch im html-Text was das Skript macht, Du musst nur mal scrollen und den unteren Bereich lesen ;)

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

ist zwar ganz nützlich aber ne kleine anleitung wäre ganz nett naja aber ist auch net schlecht wenn mann selbst gucken muss was dahinter steckt... trotzdem danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.05.2008 - 07:02

ist zwar ganz nützlich aber ne kleine anleitung wäre ganz nett naja aber ist auch net schlecht wenn mann selbst gucken muss was dahinter steckt... trotzdem danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.05.2008 - 07:01

ist zwar ganz nützlich aber ne kleine anleitung wäre ganz nett naja aber ist auch net schlecht wenn mann selbst gucken muss was dahinter steckt... trotzdem danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.05.2008 - 14:55

Ich finds gut das er nur den Code aufgeschrieben hat...
dann muss man selbst weniger machen :D

Portrait von AlexH
  • 26.04.2008 - 19:02

ist denke ich mal ein schönes Skript, aber was is daran bitte ein Tutorial? dafür sollte man keine Punkte bekommen. Tutorial (tutore= lehren) heißt ja einem etwas erklären und beibringen. Is hier nicht der Fall. Einfach nur ein Skript reinstellen, dafür sollte es keine Tutorialpunkte geben... sorry...

Portrait von Nachtfuchs
  • 21.03.2008 - 23:17

Das ist wirklich ganz nützlich ... gerade wenn nicht jeder DSL hat!
THX ...

Portrait von annelillipott
  • 14.02.2008 - 13:04

werde mich mal reinfitzen ;-))dankesehr

Portrait von Boosterservice
  • 14.02.2008 - 08:42

Vielen Dank, sowas habe ich gesucht

Portrait von trom
  • 29.12.2007 - 19:22

ein guter tipp, danke :)

:D trom

Portrait von m-steffen
  • 15.11.2007 - 11:09

Code: 5Sterne
Tut: -4Sterne geht leider nicht mehr

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.11.2007 - 13:10

Jo hammer danke das google ich schon die ganze zeit

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.10.2007 - 20:21

super , ist sehr hilfreich für mich , danke vielmals

lg

Liane

Portrait von BrainFuck
  • 01.10.2007 - 10:52

Als script super, aber als workshop eher nutzlos... Das script wird nicht erklärt und somit hat es eher was in einer scriptsammlung als hier zu suchn^^.

Portrait von map77
  • 13.09.2007 - 07:59

Vielen Dank, genau sowas habe ich gesucht :-) Supi

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.08.2007 - 16:23

Super sache das ganze Danke!!!

Portrait von feuergeist
  • 16.08.2007 - 13:03

Ähm... Vertehe nur Bahnhof, aber ich werde mir den Code mal kopieren und für mich verständlich aufarbeiten...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.08.2007 - 15:51

Nicht gut erklärt ==> Für Anfänger unverständlich :-/

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.07.2007 - 14:53

Find ich sehr gut dieses Tutorial. Allerdings denke ich ist wohl in Kürze so ein Tool nicht mehr notwendig. Analog Anschluss stirbt jetzt langsam ziemlich aus.

Mehr anzeigen

x
×
×