Bild-Preloader

A

Adam Wille

Erfahrenes Mitglied
Hi Leute,

hier mal ein ganz einfacher Preloader für die, die gerne mal ein einfacheres praktisches Beispiel sehen möchten - oder auch die, die mal einen benötigen sollten. :)

Welche Logik dahintersteckt, erfahrt ihr hier, das Beispiel nun also:
PHP: 
<script type="text/javascript" language="JavaScript">
<!--

var lauf = 0;
var bildanzahl = 2;				    // Bildanzahl anpassen!
var neueSeite = "bla.html";			// Seite zum Ansteuern nach Laden der Bilder

ladearray = new Array(bildanzahl);

ladeobjekt = new Object();

ladeobjekt.bild1 = new Image();
ladeobjekt.bild1.src = "christ1.bmp";

ladeobjekt.bild2 = new Image();
ladeobjekt.bild2.src = "christ2.bmp";

function ladecheck(obj) {
    if (obj.complete) {			    // nur zur Dokumentierung
        ladearray[lauf++] = true;
    } else {
        ladearray[lauf++] = false;		
    }
    if (ladearray.length == bildanzahl) {
        window.location = neueSeite;
    }
    return obj;
}

for (bilder in ladeobjekt) {
    ladeobjekt[bilder].onload = ladecheck(ladeobjekt[bilder]);
}

//-->
</script>
Einfach die Liste mit den Bildobjekten ähnlich derer obendrüber erweitern und die Variable bildanzahl, sowie neueSeite anpassen - und schon dürftet ihr einen recht einfach Preloader haben. :)

Geist
 
hier ist mein quelltext:


PHP: 
<<script type="text/javascript" language="JavaScript">
<!--

var lauf = 0;
var bildanzahl = 30;                    // Bildanzahl anpassen!
var neueSeite = "enter.html";            // Seite zum Ansteuern nach Laden der Bilder

ladearray = new Array(30);

ladeobjekt = new Object();

ladeobjekt.bild1 = new Image();
ladeobjekt.bild1.src = "ban1.gif";

ladeobjekt.bild2 = new Image();
ladeobjekt.bild2.src = "ban2.gif";

ladeobjekt.bild3 = new Image();
ladeobjekt.bild3.src = "ban3.jpg";

ladeobjekt.bild4 = new Image();
ladeobjekt.bild4.src = "ban4.gif";

ladeobjekt.bild5 = new Image();
ladeobjekt.bild5.src = "ban5.gif";

ladeobjekt.bild6 = new Image();
ladeobjekt.bild6.src = "ban6.gif";

ladeobjekt.bild7 = new Image();
ladeobjekt.bild7.src = "ban7.jpg";

ladeobjekt.bild8 = new Image();
ladeobjekt.bild8.src = "ban8.gif";

ladeobjekt.bild9 = new Image();
ladeobjekt.bild9.src = "ban9.gif";

ladeobjekt.bild10 = new Image();
ladeobjekt.bild10.src = "ban10.gif";

ladeobjekt.bild11 = new Image();
ladeobjekt.bild11.src = "ban11.gif";

ladeobjekt.bild12 = new Image();
ladeobjekt.bild12.src = "Bignappo.gif";

ladeobjekt.bild13 = new Image();
ladeobjekt.bild13.src = "error.gif";

ladeobjekt.bild14 = new Image();
ladeobjekt.bild14.src = "images/Abstandhalter.gif";

ladeobjekt.bild15 = new Image();
ladeobjekt.bild15.src = "images/b_01.gif";

ladeobjekt.bild16 = new Image();
ladeobjekt.bild16.src = "images/b_04.gif";

ladeobjekt.bild17 = new Image();
ladeobjekt.bild17.src = "images/b_08.gif";

ladeobjekt.bild18 = new Image();
ladeobjekt.bild18.src = "images/b_10.gif";

ladeobjekt.bild19 = new Image();
ladeobjekt.bild19.src = "images/c_01.gif";

ladeobjekt.bild20 = new Image();
ladeobjekt.bild20.src = "images/c_03.gif";

ladeobjekt.bild21 = new Image();
ladeobjekt.bild21.src = "images/c_06.gif";

ladeobjekt.bild22 = new Image();
ladeobjekt.bild22.src = "images/c_07.gif";

ladeobjekt.bild23 = new Image();
ladeobjekt.bild23.src = "images/enter_01.gif";

ladeobjekt.bild24 = new Image();
ladeobjekt.bild24.src = "images/enter_02.gif";

ladeobjekt.bild25 = new Image();
ladeobjekt.bild25.src = "images/enter_04.gif";

ladeobjekt.bild26 = new Image();
ladeobjekt.bild26.src = "images/enter_05.gif";

ladeobjekt.bild27 = new Image();
ladeobjekt.bild27.src = "chartz/c_01.gif";

ladeobjekt.bild28 = new Image();
ladeobjekt.bild28.src = "chartz/c_03.gif";

ladeobjekt.bild29 = new Image();
ladeobjekt.bild29.src = "chartz/c_06.gif";

ladeobjekt.bild29 = new Image();
ladeobjekt.bild29.src = "chartz/c_07.gif";

function ladecheck(obj) {
    if (obj.complete) {                // nur zur Dokumentierung
        ladearray[lauf++] = true;
    } else {
        ladearray[lauf++] = false;        
    }
    if (ladearray.length == 30) {
        window.location = enter.html;
    }
    return obj;
}

for (bilder in ladeobjekt) {
    ladeobjekt[bilder].onload = ladecheck(ladeobjekt[bilder]);
}

//-->
</script>



aber funktioneren tut es nicht :eek:
 
Zuletzt bearbeitet:
hehe

also der zeigt weder ein balken an, dass die bilder geladen werden, noch merke ich, dass die bilder im hintergrund geladenwerden

genaueres kann ich auch nicht sagen
 
Von einem Balken war meinerseits auch nie die Rede...

Preloading hat nicht unbedingt was mit Visualisierung zu tun, wenngleich du das vielleicht auch gerne so hättest. :)
Ich verspreche aber, das hier demnächst zu erweitern, so dass auch ein Fortschrittsbalken o.ä. dabei ist.

Und woran du "merkst", dass die Bilder nicht geladen werden, das wüsste ich auch gerne noch.
Schaust du auf deinen Traffic?

Ich kann immer von allem ausgehen, aber was davon nun zutrifft, das musst du mir schon nahebringen. :)

Geist
 
@adam wille

ich bin auch grad heftig dabei deinen code auszuprobieren, aber die frontpage-vorschau zeigt immer fehler code0 '(' wird erwartet. kann es sein dass du was in der syntax verhauen hast? oder kann mein frontpage kein javascript interpretieren!?

was mich auch etwas stutzig macht ist deine 5.letzte zeile von unten (im code):
ladeobjekt[bilder].onload = ladecheck(ladeobjekt[bilder]);

wo kommen denn auf einmal die [bilder] her?
 
Re: @adam wille

Original geschrieben von jimi hendrix
ich bin auch grad heftig dabei deinen code auszuprobieren, aber die frontpage-vorschau zeigt immer fehler code0 '(' wird erwartet. kann es sein dass du was in der syntax verhauen hast? oder kann mein frontpage kein javascript interpretieren!?
Zum Vergrößern anklicken....
Kann sein, dass da vielleicht eine Klammer fehlt, aber eigentlich habe ich das Script gecheckt und 1zu1 übernommen,
Aber Frontpage ist für Webseitengestaltung keineswegs empfehlenswert, von daher würde ich nicht so streng auf einen Fehler beharren.
Lad aber bspw. deine Datei mal auf deinen Webspace und verlinke hier oder hänge sie an ein Posting an, dann schau ich mal durch. :)
was mich auch etwas stutzig macht ist deine 5.letzte zeile von unten (im code):
ladeobjekt[bilder].onload = ladecheck(ladeobjekt[bilder]);

wo kommen denn auf einmal die [bilder] her?
Zum Vergrößern anklicken....
PHP: 
for (bilder in ladeobjekt) {
    ladeobjekt[bilder].onload = ladecheck(ladeobjekt[bilder]);
}
Ist eine einfache for ... in ... -Schleife, die alle Eigenschaften eines Objektes durchloopt und für jede Eigenschaft temporär in "bilder" eine Referenz zwischenspeichert, bis zur nächsten Eigenschaft gehüpft wird, dann kommt die neue Referenz.

Gruß,
Adam
 
2 Fe ler:

1)
JavaScript ist case-sensitive, achtet also auf Groß-/Kleinschreibung von Literalen; daher unbedingt aus deinem

ladearray = new array(bildanzahl);
ein
ladearray = new Array(bildanzahl);

machen, damit der Klassentyp Array erkannt wird.

2)
Du hast weiter unten folgende Codezeile:

[...]
function ladecheck(obj) {
if (obj.complete]) {
[...]

Hier ist bei der if-Abfrage nur die eckige Klammer zuviel, einfach löschen. :)

Das sollte eigentlich in deinem Beispiel alles sein, was mir auffiel, test's einfach nochmal in der modifizierten Variante. :)

Und immer dran denken, dass mancher User auch JavaScript deaktiviert hat, der kommt bei deiner Index-Seite nicht sehr weit, wenn du nicht auch ein manuelles Weiterleiten anbietest, das aber nur nebenbei.

Gruß,
Adam
 
@adam wille

Danke! :-) Ich hab die Fehlermeldung dank deiner korrektur wegbekommen. und es sieht auch so aus als würde dein code laufen, aber wenn, dann so schnell dass ich das bild nicht mehr zu sehen bekomme. naja mein cache hat die bilder ja auch schon drin...

also was javascript angeht: dein preloader ist der erste javascript-code den ich "nieder" geschrieben habe, aber es erinnert mich stark an Turbo Pascal... (11. und 12. Klasse auffa Penne..) Ist auch schon ganz schö lange her (4 jahre wen's interessiert). Das hab ich aber mal draufghabt, und jetzt überleg ich, wie und ob man in deiner ladecheck function


function ladecheck(obj) {
if (obj.complete) { // nur zur Dokumentierung
ladearray[lauf++] = true;
} else {
ladearray[lauf++] = false;

für den fall ladearray[lauf++] = false; einen befehl einbauen kann der solange die bilder nicht geladen sind, einen link auf die hauptseite anzeigt... ist das überhaupt möglich oder muss man einfach unter html-code einen link á la

wenn-sie-in-15-sec-nicht-weitergeleitet-werden-klicken-sie-hier

alternativ anbieten? denn wenn der benutzer javascript deaktiviert hat, wird ihm der html-code doch trotzdem angezeigt, oder hab ich da was falsch verstanden?

gruss jimi :)

p.s.: wie wäre den statt "new Image" für ein bild die variable für einen sound, also .wav .mid oder .mp3 in javascript?

p.p.s.: hmm. ich hab den zu ladenden bildern grad zum testen mal ein 11.mb jpg hinzugefügt und der ladebildschirm zuckt immer noch an mir vorbei wie ein dejá vu auf der netzhaut...
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück