Christoph Müller: Preload einer Seiter per Klick beginnen

hallo,

vielleicht ist ja jemand von euch so gütig und würde mir helfen (danke danke danke bitte bitte bitte)
würde gerne meine seite per preloader vorladen lassen, ein script hab ich auch schon gefunden (siehe unten). aber anstatt das das script gleich startet würde ich dieses gerne per klick auf eine grafik bzw. link starten lassen.

und der lade balken sollte eine grafik sein und nicht eine angegebene farbe bzw. farbcode. hier der code:

<html>
<head>
<title>Preloader mit Ladeanzeige</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<script language=JavaScript1.2>

<!-- begin hiding

startingColor = new Array() // <-- NICHT VERÄNDERN!

endingColor = new Array() // <-- NICHT VERÄNDERN!

// Hier deine Grafiken rein:

var yourImages = new Array("ie5mac.gif","testani.gif") // Ersetzen und erweitern durch deine Grafiken

var locationAfterPreload = "../trickkiste/tricks130.shtml" // Hier den Pfad zur Seite die nach dem Vorladen geladen werden soll

var preloadbarWidth = 300 // Länge des Balkens

var preloadbarHeight = 13 // Höhe desselbigen

var backgroundOfGradient = "#000000"

// Farbe mir der der Balken beginnt! Gib erste, dritte und fünfte Zahl/Buchstaben der Farbe an

startingColor[0] = "F"

startingColor[1] = "F"

startingColor[2] = "F"

// Wie oben nur die Farbe mit dem es endet

endingColor[0] = "0"

endingColor[1] = "0"

endingColor[2] = "0"

var gap = 7 // mind. 2! verändern, wenn es nen JS-Error gibt.

// NIX MEHR VERÄNDERN

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>

<b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Bilder werden geladen...
</font></b><br>
<script language=JavaScript1.2>

<!-- beging hiding

document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');

for (i = 0; i < num; i++) {

document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');

}

document.write('</tr></table>');

document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)">Ladevorgang Überspringen</a></small></p></font>')

loadImages();

// end hiding -->

</script>

</body>
</html>

  1. weiß niemand einen rat? denke mal ist nicht alszuviel was daran geändert werden muß, leider finde ich es selbst nicht.

  2. Moin,

    schätze, den Code hast du nicht ganz allein zusammengebastelt ;-).
    Eigentlich ist es nicht der sinn dieses Forums, unverstandenen Code für Nutzer anzupassen, sondern eher bei Fehlern und Problemen weiterzuhelfen.
    Die Standardfragen sind dann immer: Was geht nicht? Was hast du versucht? Wo geht es nicht weiter?

    Aber ich hab heute noch keine gute Tat vollbracht, deshalb:

    entscheidend ist der folgende Bereich

    <script language=JavaScript1.2>
    <!-- beging hiding
    ...
    loadImages();
    // end hiding -->
    </script>

    "Deine" Funktion loadImages() lädt die Bilder vor. Somit solltest du sie im onClick-Bereich (mach dich dazu mittels SelfHTML mit EventHandlern vertraut) des Bildes aufrufen, das den Preload starten soll. Vielleicht solltest du dann auch noch eine Abfrage einbauen, damit diese Funktion nur einmal aufgerufen wird.

    Wenn du auf den "Balken" verzichten willst, spar dir doch einfach den Abschnitt, in dem die Tabelle definiert wird.

    so long.