Images vorladen
    
 Home • JavaScript • Bilder • Grafiken vorladen Script 01 QuellCode

 Grafiken vorladen 01  (mit JavaScript)

Mit JavaScript werden die Grafiken durch JavaScript-Anweisungen dem Browser als Elemente der Seite bekannt gemacht. Dabei werden die Grafiken bereits in den internen Speicher des Browsers geladen aber noch nicht angezeigt.

Grafiken vorladen mit JavaScript - Variante 1

UPDATE  24.05.2010  Script und Erklärungen überarbeitet
1) Die vorzuladenden Grafiken werden in einem Array aufgelistet (übersichtlicher)
2) Die vorgeladenen Grafiken werden in einem 2. Array abgelegt.

Um eine flüssige Anzeige sicher zu stellen, ist es manchmal notwendig Grafiken vorzuladen. Für eine MouseOver-Funktionen z.B. sollte das MouseOver-Bild schon bereitgestellt werden (Laden der Grafik in den Browserspeicher), bevor der Mauszeiger den Effekt einleitet. So kann man eine verzögerte Anzeige umgehen. Schließlich würde sonst erst beim Auslösen der MouseOver-Funktion die Anfrage für das zu tauschende Bild zum Server geschickt.

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

// dieser Array dient nur zur Auflistung der Bilder
var BildListe = new Array();
BildListe[0] = "../images/img01.jpg";
BildListe[1] = "../images/img02.jpg";
BildListe[2] = "../images/img03.jpg";
BildListe[3] = "../images/img04.jpg";


// vorzuladene Bilder werden nun in den neuen Array 'Bilder' geschrieben

var Bilder = new Array()

function Vorladen01()
{
  for (i = 0; i < BildListe.length; i++) {
    Bilder[i] = new Image();
    Bilder[i].src = BildListe[i];
  }
}


Vorladen01();

//-->
</script>




   Vorladen mit JavaScript 01 - Erklärungen

Zwei Schritte sind notwendig um eine Grafik vorzuladen. Zuerst wid ein Image-Objekt kreiert und einer Variablen zugeordnet.

1) Neues Image-Objekt schaffen 
Bild01 = new Image();
'Bild01' ist nun ein Image-Objekt!

2) Datenquelle zuordnen

Dann wird dem Image-Objekt eine Datenquelle (source) zugordnet. 
Bild01.src = "../images/Grafik01.jpg";
Dem Image-Objekt 'Bild01' ist jetzt die URI zugeordnet. Dem Browser ist dieses Image-Objekt nun bekannt und im Browsercach ist abgelegt, was die Datenquelle für dieses Objekt ist. Das Image ist vorgeladen.


a)  Schritt für Schritt

Wenn mehrere Grafiken vorgeladen werden sollen, könnten sie für alle vorzuladenden Grafiken diese beiden Schritte durchlaufen. Dazu werden sie innerhalb eines Script-Bereichs notiert. 

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

Bild01 = new Image();
Bild01.src = "../images/Foto01.jpg";

Bild02 = new Image();
Bild02.src = "../images/Foto02.jpg";

Bild02 = new Image();
Bild02.src = "../images/Foto03.jpg";

...

//-->
</script>
Das ist bei wenigen Grafiken noch OK. Wird die Liste länger solte man das vereinfachen oder automatisieren.


b)  Automatisierung

Zunächst erstelle ich eine Liste der Grafiken. Für dieses Beispiel verwende ich wegen der besseren Übersicht ein Register (Array), welches die URIs der Grafiken enthält. 
// dieser Array dient nur zur Auflistung der Bilder
var BildListe = new Array();
BildListe[0] = "../images/img01.jpg";
BildListe[1] = "../images/img02.jpg";
BildListe[2] = "../images/img03.jpg";
BildListe[3] = "../images/img04.jpg";
Eine Funktion soll dann die beiden Arbeitsschritte
  • neues Image-Objekt schaffen
  • Datenquelle zuweisen
für alle notierten Grafiken übernehmen.

Nach der Übername der Information für die Grafiken aus dem Array sorgt die Funktion dafür, das jede dort notierte Grafik dem Browser als ein neues Bild-Objekt bekannt gemacht und eine URI zugeordnet wird.


c)  Grundversion

Die einfachste Form der automatisierten JavaScript-Anweisungen sieht dazu 3 Schritte vor:
  • die Grafikreferenz (URI) für jede Grafik wird dem Register "BildListe" entnommen
  • für jedes Element des Registers wir ein Image-Objekt geschaffen
  • jedem Image-Objekt wird die Grafikreferenz (URI) zugeordnet
Diese 3 Schritte werden innerhalb einer Schleife abgearbeitet. Danach sind dem Browser alle eingelesenen Grafiken des Arrays als Image-Objekt bekannt.

// dieser Array dient nur zur Auflistung der Bilder
var BildListe = new Array();
BildListe[0] = "../images/img01.jpg";
BildListe[1] = "../images/img02.jpg";
BildListe[2] = "../images/img03.jpg";
BildListe[3] = "../images/img04.jpg";

function Vorladen()
{
  for (i = 0; i < BildListe.length; i++) {
    var Bild = new Image();
    Bild.src = BildListe[i];
  }
}

Vorladen();

d)  Erweiterung

In der erweiterten Form gibt es einen zusätzlichen Arbeitsgang:
  • die Grafikreferenz (URI) für jede Grafik wird dem Register "BildListe" entnommen
  • für jedes Element des Registers wir ein Image-Objekt geschaffen
  • jedem Image-Objekt wird die Grafikreferenz (URI) zugeordnet
  • die Grafikreferenz (URI) wird in einen 2. Array "Bilder" geschrieben
Diese Schritte werden innerhalb einer Schleife abgearbeitet. Danach sind dem Browser alle eingelesenen Grafiken des Arrays als Image-Objekt bekannt und die URIs in den Array "Bilder" geschrieben worden.

Zur Erklärung (im Script verwende ich eine andere, vereinfachte Schreibweise): 
var Bilder = new Array()

function VorladenDemo()
{
  for (i=0; i < BildListe.length; i++) {
    var Bild = new Image();
    Bild.src = BildListe[i];
    Bilder[i] = Bild;
  }
}



   Das JavaScript

Die Abarbeitung des zu wiederholenden Vorgangs ist in eine Schleife eingebunden die so lange durchlaufen wird, bis jede Grafik aus dem Register (BildListe) eingelesen wurde. Dieser Block des JavaScript-Codes ist in die Funktion 'Vorladen01()' eingebettet und kann gestartet werden, indem man diese Funktion zum Vorladen der Bilder aufruft. Danach stehen die Informationen über die Grafiken im browserinternen 'Gedächtnis' (dem browserinternen Speicher) zum Abruf bereit.

Die Auflistung der Grafiken als Arrayelemente ist in Orange dargestellt

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

// dieser Array dient nur zur Auflistung der Bilder
var BildListe = new Array();
BildListe[0] = "../images/img01.jpg";
BildListe[1] = "../images/img02.jpg";
BildListe[2] = "../images/img03.jpg";
BildListe[3] = "../images/img04.jpg";


// vorzuladene Bilder werden nun in den neuen Array 'Bilder' geschrieben

var Bilder = new Array()

function Vorladen01()
{
  for (i = 0; i < BildListe.length; i++) {
    Bilder[i] = new Image();
    Bilder[i].src = BildListe[i];
  }
}


Vorladen01();

//-->
</script>


   die Arbeitsweise des Scripts in Worten:

Im Register "BildListe" sind alle Grafiken notiert

Element 1 des Registers = die Grafikreferenz (URI) für die Grafik 1 "../images/img01.jpg"
Element 2 des Registers = die Grafikreferenz (URI) für die Grafik 2 "../images/img02.jpg"
Element 3 des Registers = die Grafikreferenz (URI) für die Grafik 3 "../images/img03.jpg"
Element 4 des Registers = die Grafikreferenz (URI) für die Grafik 4 "../images/img04.jpg"
neues Register "Bilder" wird generiert   [Bilder = new Array()]

führe die nächsten Schritte für jede Grafik im Register "BildListe" aus:

{
gehe zum ersten / nächsten Element des Registers "BildListe"
    Bilder(i) ist ein neues Image-Objekt
     die Grafikreferenz (URI) für dieses Objekt ist das, was in BildListe(i) steht
 }




Das war's schon!

Alles Notwendige wurde erwähnt! Wenn Sie die Funktion zum Vorladen von Grafiken verwenden möchten, kopieren Sie den Quellcode im Head-Bereich Ihrer HTML-Seite ein. Natürlich müssen Sie die Referenz der vorzuladenden Grafiken anpassen. Den Link zur Textdatei für den Quellcode finden Sie im Kopfbereich dieser Seite.






Preload Demo

Preload mit HTML und CSS

Preload mit JavaScript 02

Preloader-Info anzeigen








Das wars, jetzt folgen lediglich weiterführende Gedanken



   Überprüfen

Das könnte man nun überprüfen, wenn man die browserinternen Informationen abrufen würde. Neben den Grafiken die ohnehin in die HTML-Seite eingebunden sind und überprüfen könnte mit ... 
<script type="text/javascript" language="JavaScript">
<!--
document.write("Die Seite enthält " + document.images.length + " Grafiken");
//-->
</script>
... könnte man auch den Inhalt des Arrays 'BildArray' anzeigen lassen mit 
<script type="text/javascript" language="JavaScript">
<!--
document.write("BildArray enthält " + BildArray.length + " Informationen");
var Liste = "| ";
for (var i = 0; i < BildArray.length; ++i) {
  var Liste = Liste + BildArray[i] + " | ";
}
document.write(Liste);


//-->
</script>

Für diese Seite würde die Information so dargestellt:







Soweit meine Überlegungen zu Erweiterungen des JavaScripts. Dieses Basisscript könnte man also noch ein wenig ausbauen. Bisher hatte ich das lediglich zur Kontrolle des Ladevorgangs beim Testen eingesetzt. Wenn meine Zeit es zulässt, wird es dazu eigenständige Beispielseiten geben:
  • Anzeige des abgeschlossenen Ladevorgangs
  • Optionales Vorladen (Benutzerbestimmt)
  • Einblenden der eigentlichen Seite erst nach Ende des Ladevorgangs



   Die entsprechenden Anzeigen

Der tatsächliche Ladezustand soll anzeigt werden. Dazu würde ich ein 16 x 16 Pixel großes Image auf der Seite anzeigen. Abhängig vom Ladezustand würde man dann eines der 3 Mini-Images sehen:

Ladevorgang noch nicht gestartet:loading-indicator00.gif
Ladevorgang wurde gestartet:loading-indicator01.gif
Ladevorgang ist abgeschlossen:loading-indicator02.gif


Das Image wird notiert und erhält das Attribut id="Status" 
<img id="Status" width="16" height="16" src= ... >
Das Image würde dann durch eine JavaScript-Funktion ausgetauscht durch die Anweisung 
document.getElementById("Status").src = "loading-indicatorXX.gif";



NACH OBEN