IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - JavaScript: Bild vorladen



JavaScript: Bild vorladen

Um sich nachher Zeit zu sparen, ist es möglich mit JavaScript Bildern schon zu laden bevor diese überhaupt angezeigt werden sollen. Ein kleines Tutorial.


Autor: Patrick Faes (dreamer)
Datum: 02-01-2004, 22:24:15
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 17221x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einleitung

Ich schreibe dieses Tutorial weil auch ich immer wieder damit konfrontiert werde, dass meine Grafiken zu lange zum Laden brauchen. Als erstes zeige ich euch mal zwei sehr nützliche Funktionen:


load_img = new Image();
load_img.src = 'images/file.gif';
Mit der ersten Funktion wird bestimmt, dass der Computer ein Bild vorladen muss. Mit der zweiten Funktion wird bestimmt welche Datei er laden muss. Aber um zu wissen, wann die Grafiken an zu zeigen sind, muss regelmäßig gecheckt werden ob die Grafik schon geladen ist. Dies kann man am Besten so:


timerid = setInterval("function_name", time);

Wenn wir z.B. für time 2000 eingeben, wird der Computer jede zwei Sekunden checken of die Funktion den Wert true ergibt. Danach sollte man den Interval natürlich auch beenden. Das geht so:


clearInterval(timerid);

Wie man sehen kann, wird der Interval beendet. Man muss mit einem Namen spezifizieren welchen Interval man unterbrechen möchte, deshalb wurde der Interval einen Namen vergeben (indem es die Variable timerid gleich gesetzt wurde).

Da wir dies jetzt wissen, können wir das Script vervollständigen:


<script type="text/javascript">
load_img = new Image();
load_img.src = 'bild.gif';
function replace_img(){ if (load_img.complete) { document['target_img'].src=load_img.src; clearInterval(timerid); }
}

timerid = setInterval("replace_img()", 2000);
Zuerst wird hier die Funktion Image() aufgerufen, und danach wird spezifiziert in welchem Verzeichnis sich die Bild-Datei befindet und wie er heißt. Dann wird eine Funktion deklariert. Diese wird, wenn das Bild geladen wurde, im Dokument (die Seite) eingefügt und der Interval gestoppt.
Es ist auch erst danach, dass definiert wird, dass ein Interval stattfinden soll. Diese wird dann um die zwei Sekunden die Funktion aufrufen, bis die Datei geladen wurde.
Im Body kommt dazu noch:


<IMG name="target_img">

Da diese Grafik dann im Cache gespeichert wird, kann man den Code einfach auf jede Seite kopieren. Eventuell kann man den <img>-Tag auch schon ein vorläufiges Bild geben. Dazu fügt man im HTML-Code einfach das SRC-Attribut hinzu.
Anmerkung: ein purer HTML-Trick ist <img lowsrc="" src="">. Hierbei wird erst eine Alternative geladen (z.B. dieselbe Grafik mit einer niedrigeren Resolution) die angezeigt wird bis die eigentliche Grafik geladen ist.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0