Anzeige
Tutorialbeschreibung

Einfaches Vorladen von Bildern (HTML+Javascript)

Einfaches Vorladen von Bildern (HTML+Javascript)

Der einfachste und unkomplizierteste Weg, Grafiken für eine Website vorzuladen. Für Programmieranfänger gut geeignet, keine speziellen Kenntnisse erforderlich.


Oft hat man beim Programmieren das Problem, dass man eine schöne Website mit vielen Bildern usw. aufgebaut hat, vielleicht mit ein paar Mausover- oder hoover-Effekten. Als Beispiel nenne ich jetzt einfach eine Navigationsleiste, bei der die Menüpunkte in Grafiken dargestellt sind. Bei entsprechender Größe und Anzahl dieser Grafiken ist ein Hoover-Effekt, also das Ändern des Bildes bei Überfahren mit dem Mauszeiger, fast undenkbar, da für jeden Menüpunkt wieder ein neues Bild geladen werden müsste, wodurch sich die Navigation nicht optimal und schnell bedienen ließe.

Hier wenden wir jetzt also einen kleinen Trick mit Javascript an, um diese Bilder bereits VOR dem eigentlichen Aufruf in den Cache des Browsers zu laden, damit dieser dann später sofort darauf zugreifen kann. Aber keine Angst, der Code ist im Grunde ganz simpel und kann problemlos in eine HTML-Datei eingebunden werden.

Zunächst erschaffen wir die Javascript-Umgebung, um das Script in die HTML-Datei einzufügen. Der gesamte folgende Code muss übrigens innerhalb des <head>-Tags stehen, für die, die es noch nicht wissen:

<html>
<head>

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

//Code

</scpipt>

</head>
<body>
</body>
</html> 

Nun zum Programm selbst:

Als Erstes müssen wir die Bilder auflisten, die wir letztendlich vorladen wollen. Dafür verwenden wir einen Array in Javascript:

var Liste = new Array();

Jetzt haben wir den Array erzeugt, nun wird es Zeit, ihn zu füllen (dieser Array hat hier jetzt nur eine Listen-Funktion und sonst keine!):

Liste[0] = "http://meine-domain.de/bild1.jpg"; 
Liste[1] = "http://meine-domain.de/bild2.jpg";
Liste[2] = "http://meine-domain.de/bild3.jpg";

Mit Liste[x] geben wir die Nummer des jeweiligen Arrayteils an und mit der URL das Bild, das vorgeladen werden soll. Nun kann man beliebig viele Arraywerte eintragen; hier mache ich es jetzt der Kürze halber bis 4 (am Ende sind es dann 5 vorzuladene Bilder, da wir ja bei 0 anfangen). Bisher haben wir also:

<html>
<head>
<script type="text/javascript" language="JavaScript"> 

var Liste = new Array(); 

Liste[0] = "http://meine-domain.de/bild1.jpg";
Liste[1] = "http://meine-domain.de/bild2.jpg";
Liste[2] = "http://meine-domain.de/bild3.jpg"; 
Liste[3] = "http://meine-domain.de/anderes_bild1.jpg";
Liste[4] = "http://meine-domain.de/anderes_bild2.jpg"; 

</scpipt>
</head>
<body>
</body>
</html> 

 
Nun laden wir mit
var Bilder = new Array();

die Bilder in einen Array, um sie dann mit dieser Funktion letztendlich vorzuladen:

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

Mit der For-Schleife durchlaufen wir jetzt für jedes einzelne Bild den Lade-Vorgang. Die Anzahl der Schleifendurchläufe wird durch Liste.length bestimmt. Mit Bilder[i] = new Image(); erzeugen wir zunächst die gleich benötigte Variable. Und mit Bilder[i].src = Liste[i]; weisen wir der Bildvariable die URL aus der Liste zu.

Damit alles funktioniert, müssen wir diese Funktion jetzt auch noch aufrufen, und zwar mit:

vorladen();

Im Gesamten haben wir jetzt folgenden Code:

<html>
<head>
<script type="text/javascript" language="JavaScript">

var Liste = new Array();

Liste[0] = "http://meine-domain.de/bild1.jpg";
Liste[1] = "http://meine-domain.de/bild2.jpg";
Liste[2] = "http://meine-domain.de/bild3.jpg";
Liste[3] = "http://meine-domain.de/anderes_bild1.jpg";
Liste[4] = "http://meine-domain.de/anderes_bild2.jpg";

var Bilder = new Array();

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

vorladen();

</scpipt>
</head>
<body>
</body>
</html>

Jetzt werden alle Bilder, die im Array Liste mit einer URL definiert worden sind, gleich zu Beginn des Ladens der Seite vorgeladen.

Ihr könnt den Array Liste natürlich bis zum Platzen füllen und müsst danach nichts mehr am restlichen Code ändern. Darauf zielt ja das Ganze ab, dass es leicht editierbar und einbindbar ist.

Ich hoffe, ihr könnt etwas damit anfangen ;)

Viele Grüße von Fidelis_jpg!

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von schraubergott
  • 07.01.2014 - 23:33

Vielen dank für dieses Tutorial

Portrait von bo2221
  • 20.08.2011 - 19:18

Yeah cooles ding danke schön

Portrait von pascal.k
  • 28.03.2011 - 23:02

danke, schön, schnell und einfach =)

Portrait von Frank_B_punkt
  • 11.02.2011 - 20:41

Sehr schön geschrieben. Vielen Dank

Portrait von Chlorgas
  • 14.01.2011 - 18:45

Feines Tutorial und einfach anzuwenden! Vielen Dank!

Eine Frage am Rande: Kann es sein, dass dieses Script mit Greybox (von Orangoo Labs) nicht verträgt?

Portrait von Chlorgas
  • 14.01.2011 - 18:56

Hat erledigt, funktioniert super!! :D

Portrait von Zahnerer
  • 03.11.2010 - 09:07

Gut und einfach erklärt - eben so, wie es sein soll.

Vielen Dank

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 31.10.2010 - 17:27

Super! Noch 'ne Frage: Kann ich mit diesem oder einem ähnlichen Trick auch Flash-Dateien vorladen??

Portrait von Fidelis_jpg
  • 31.10.2010 - 18:24

Also im PRINZIP funktioniert das^^
Wie genau, dafür kenne ich Flash leider zu wenig.
Vielleicht geht es auf die selbe Methode, wenn man statt Bilder[i] = new Image();
Bilder[i] = new Object(); schreibt. Musst du mal ausprobieren und dagen, was bei rauskommt^^

Portrait von buerotante
  • 29.10.2010 - 23:16

Gefällt mir gut! :-)

Portrait von DGKhan
  • 29.10.2010 - 20:00

Sehr gut..
Einfach und simpel gestrickt..
Meine fünf Sterne hast du schon :)

Portrait von Designerist
  • 29.10.2010 - 12:10

Vielen Dank, das kann ich sehr gut einsetzen!

Portrait von Bic

Bic

  • 29.10.2010 - 08:21

Danke, genau das habe ich gesucht.

Portrait von regina
  • 28.10.2010 - 08:25

Gut erklärt, und ich werde das auf jeden Fall mal ausprobieren!

Portrait von bjoernklein
  • 25.10.2010 - 18:25

Elegant gelöst!

Etwas umfangreicher ist vermutlich das parallele Anzeigen eines Lade-Status (nicht lediglich ein rotierendes Lade-Gif, sondern eine Echtzeitanzeige) Ich nehme an, das lässt sich nicht einfach mit JS lösen...

Portrait von Fidelis_jpg
  • 31.08.2011 - 03:26

Es ist möglich den Ladestatus von mehreren Bildern anzuzeigen, alsobei 100 Bilder könnte man eine schöne %-Anzeige machen.
Mit Sicherheit kann man auch den Status einer einzelnen Grafik anzeigen, aber das ist dann schon komplizierter, da man ständig prüfen und ausgeben müsste, wie viel von einem Bild jetzt schon übertragen wurde.

Portrait von mindraper
  • 13.01.2012 - 22:26

AJAX ist das stichwort.

allerding: eine "richtige" ladeanzeige... selbst wenn du das hinbekommst: overhead wie verrückt. javascript definiert keine methode, mit der die dateigröße ausgelesen werden kann. wie soll man dann prüfen, wieviel % einer ( oder mehrerer ) datei(-en) dann schon geladen wurden? ich kann's mir nicht vorstellen.

ansonsten: ein + dafür, dass das tut wirklich einfach ist.
aber: - dafür, dass du insgesamt 3 globale variablen definierst ( var Liste, Bilder & vorladen() ). könnte der grund sein, weshalb andere scripts im ernstfall nicht mehr laufen, die ebenfalls im globalen scope hängen. könnte man versuchen zu vermeiden.

nix für ungut :)

gruß

Portrait von psdgustav
  • 24.10.2010 - 16:44

Sehr schön! Ein TUTORIAL, das gut erklärt und funktioniert. Wenn alle so waren.

Portrait von mohnhaupt
  • 24.10.2010 - 15:33

Find ich gut, aber mit CSS wäre es mir lieber gewesen.

Portrait von flyjoker
  • 24.10.2010 - 13:44

vielen dank. so etwas ist sehr nützlich.

x
×
×