Grafiken vorladen 02  (mit JavaScript)

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

Für eine MouseOver-Funktionen 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. Das Gleiche gilt zum Beispiel auch für eine DiaShow deren Bilder später ohne Verzögerung angezeigt werden sollen.

Welche URL hat Bild Nr. 1 im Array Bilder ?" Welche URL hat Bild Nr. 2 im Array Bilder ? Welche URL hat Bild Nr. 3 im Array Bilder ? Tausche das angezeige Foto mit Foto 1 im Array Bilder Tausche das angezeige Foto mit Foto 2 im Array Bilder Tausche das angezeige Foto mit Foto 3 im Array Bilder

1) Sie möchten bei einer größeren Bildauswahl für eine Diashow (zum Beispiel) nicht sämtliche Grafiken sofort laden. Dazu könnten Sie die anzuzeigenden Bilder in Gruppen zusammenfassen und bei der Auswahl einer Gruppe genau diese Grafiken vorladen.

2) Sie möchten für eine MouseOver-Aktion (zum Beispiel) mehrere Sets von Grafiken bereitstellen. Abhängig vom gewählten Layout der Seite haben die Sets unterschiedliche Farben. Da nur ein Set benötigt wird, sollen nicht sämtliche Grafiken sofort geladen werden. Nur der benötigte Set von Grafiken soll vorgeladen werden.

var Tagfotos = new Array;
Tagfotos[Tagfotos.length] = "images/tag01.jpg";
Tagfotos[Tagfotos.length] = "images/tag02.jpg";
Tagfotos[Tagfotos.length] = "images/tag03.jpg";

var Nachtfotos = new Array;
Nachtfotos[Nachtfotos.length] = "images/nacht01.jpg";
Nachtfotos[Nachtfotos.length] = "images/nacht02.jpg";
Nachtfotos[Nachtfotos.length] = "images/nacht03.jpg";

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

var Bilder = new Array();

var Tagfotos = new Array;
Tagfotos[Tagfotos.length] = "images/tag01.jpg";
Tagfotos[Tagfotos.length] = "images/tag02.jpg";
Tagfotos[Tagfotos.length] = "images/tag03.jpg";

var Nachtfotos = new Array;
Nachtfotos[Nachtfotos.length] = "images/nacht01.jpg";
Nachtfotos[Nachtfotos.length] = "images/nacht02.jpg";
Nachtfotos[Nachtfotos.length] = "images/nacht03.jpg";

// hier könnten Sie weitere Sets eintragen
var Autos = new Array;
Autos[Autos.length] = "grafiken/volkswagen.jpg";
Autos[Autos.length] = "grafiken/toyota.jpg";
Autos[Autos.length] = "images/audi.jpg";



function BilderVorladen(ArrayName)
{
  // vorzuladene Bilder werden in den Array 'Bilder' geschrieben

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


// Bild-Set "Tagfots" vorladen
BilderVorladen(Tagfotos);



/*
hier folgen nun Funktionen für einen Bildtausch
die auf die vorgeladenen Grafiken zugreifen
Verweise für Quellcode und Download im Kopf dieser Seite
*/


//-->
</script>

  Was macht das Script (in Worten) - Info ein- / ausblenden

Ein neues Register "Bilder" wird generiert   [Bilder = new Array()]

Im Register "Tagfotos" sind Grafiken notiert, schaue dort nach

Element 1 des Registers = die Grafikreferenz (URI) für die Grafik 1 "images/tag01.jpg"
Element 2 des Registers = die Grafikreferenz (URI) für die Grafik 2 "images/tag02.jpg"
Element 3 des Registers = die Grafikreferenz (URI) für die Grafik 3 "images/tag03.jpg"

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

{
gehe zum ersten / nächsten Element des Registers "Tagfotos"
    Bilder(i) ist ein neues Image-Objekt
    die Grafikreferenz (URI) für dieses Objekt ist das, was in Tagfotos(i) steht
    hänge diese Information an den Array 'Bilder' an
}

BilderVorladen(Tagfotos);

Tagfotos[Tagfotos.length] = "images/tag01.jpg";
Tagfotos[Tagfotos.length] = "images/tag02.jpg";
Tagfotos[Tagfotos.length] = "images/tag03.jpg";

Nachtfotos[Nachtfotos.length] = "images/nacht01.jpg";
Nachtfotos[Nachtfotos.length] = "images/nacht02.jpg";
Nachtfotos[Nachtfotos.length] = "images/nacht03.jpg";

Auswahl: Tagfoto   Nachtfoto Ergebnis der Abfrage der URL mit  "Bilder[0].src" Ergebnis der Abfrage der URL mit  "Bilder[1].src" Ergebnis der Abfrage der URL mit  "Bilder[2].src" Foto austauschen, Datenquelle =  "Bilder[0].src" Foto austauschen, Datenquelle =  "Bilder[1].src" Foto austauschen, Datenquelle =  "Bilder[2].src"

document.getElementById("Testfoto").src = Bilder[0].src;
document.getElementById("Testfoto").src = Bilder[1].src;
document.getElementById("Testfoto").src = Bilder[2].src;

var Bauwerke = new Array;
Bauwerke[Bauwerke.length] = "stadthalle.jpg";
Bauwerke[Bauwerke.length] = "rathaus.jpg";
Bauwerke[Bauwerke.length] = "kirche.jpg";

if (Auswahl == "x")
{
BilderVorladen(Tagfotos);
}

if (Auswahl == "y")
{
BilderVorladen(Nachtfotos);
}

<a href='javascript:BilderVorladen(Tagfotos)'>Geilenkirchen bei Tag</a>
<a href='javascript:BilderVorladen(Nachtfotos)'>Geilenkirchen bei Nacht</a>

<a href='javascript:Show01()'>Geilenkirchen bei Tag</a>
<a href='javascript:Show02'>Geilenkirchen bei Nachts</a>

function Show01()
{
BilderVorladen(Tagfotos);
StartDiashow();
}

function Show02()
{
BilderVorladen(Nachtfotos);
StartDiashow();
}

Für die Diashow ist die Verwaltung der Bilder unkompliziert, denn die Bild-Informationen der Serie werden durch das PreLoader-Script ja alle in den neuen Array 'Bilder' geschrieben. Die DiaShow kann sich jedesmal (egal welche Serie gewählt wurde) in ein und demselben Array 'bedienen'.

  for (i=0; i < Bilder.length; i++) {
    // Aktion (klicken, zeitgesteuert)
    // entspechendes Bild anzeigen
    // Bildadresse =  Bilder[i].src

    // von vorne beginnen wenn letzer Eintrag im Array erreicht
    if(i == Bilder.length) {
    i == 0;
    }

  }