HintergrundBilder vorladen

**flashed** · 14.06.2006, 19:47

Ich weiß zwar nicht ob das folgende Script auch beim IE funktionierte, habe grad keine Lust es zu testen xD, aber du kannst es ja mal ausprobieren.

<head>
<script language="JavaScript" type="text/javascript">
function loadImages() {
if (document.getElementById) {
document.getElementById('hidepage').style.visibility = 'hidden';
document.getElementById('pageganz').style.display = 'block';
}
else {
if (document.layers) {
document.hidepage.visibility = 'hidden';
document.pageganz.display = 'block';
}
else {
document.all.hidepage.style.visibility = 'hidden';
document.all.pageganz.style.display = 'block';
}
}
}
</script>
</head>

<body OnLoad="loadImages()">
<div id="hidepage" style="position: absolute; left:0px; top:0px; background-color: #1F1F1F; layer-background-color: #1F1F1F; height: 100%; width: 100%;">

<table width="100%" style="height:100%;" align="center">
<tr>
<td valign="middle" align="center">Loading ...</td>
</tr>
</table>
<div style="display:none;">
<img src="image1.png" alt=""> // Hier kommen deine Bilder hin die du vorladen willst
<img src="image2.png" alt="">
<img src="image3.png" alt="">
...
</div>
</div>
<div id="pageganz" style="display:none;">
// Dieses div-Element umschließt deine eigentliche Page
</div>
</body>

mfg />flashed

**Jesseblue** · 14.06.2006, 20:57

Die Idee mit der visibility ist echt gut, nur irgendwie kriege ich nicht heraus wann ein _Hintergrundbild_ im IE fertig geladen worden ist - onComplete z.B. scheint da auch net wirklich weiterzuhelfen (beim Firefox klappt es mit onComplete, weil es erst dann getriggert wird, wenn die Bilder auch wirklich geladen sind. Der IE hingegen feuert wohl das Event wenn das umgebene <div> fertig ist - egal ob der Hintergund rdy ist.).

So nu erstmal Fussball!

**flashed** · 15.06.2006, 02:44

Original geschrieben von flashed
<body OnLoad="loadImages()">

Mit dem Befehl OnLoad werden die Bilder im div-Element schon vorgeladen und dieses div wird erst ausgeblendet nach dem alle Bilder geladen sind, sodass die Bilder in der foldenden page sofort angezeigt werden.
Ich habe es gerade noch mal getestet und es funktioniert mit IE, Mozilla, Opera und Netscape einwandfrei.

**Jesseblue** · 15.06.2006, 13:04

Hab den Code auch mal ausgetestet, und - ja er klappt einwandfrei. Ich benutze für mein kleines Projekt aber durch JS generierte HTML-Konstrukte und hier fangen die Probleme an. Denn Firefox und IE verhalten sich irgendwie grundsätzlich anders, der Eine muss Objekte erst rendern damit man damit diverse Dinge anstellen kann, beim Anderen reicht es wenn man einfach das Objekt erstellt.

Naja, ich gehe so ähnlich vor wie bei deinem Script. Erst die Bilder einlesen, dann unsichtbar an den <body> packen und dann _sollten_ die Bilder vorgeladen sein -> beim Firefox ist dem auch so.
Der IE läd die Bilder auch vor, läd dann aber jedes der wiederverwendeten Bilder nochmals! Sprich, ich habe ein <img> mehrmals als Hintergrundbild und der läd jede Kopie davon erneut vom Server, obwohl es doch im Cache liegt?!?

Ach, ich könnt ... -.-
Gibt es vieleicht ne Möglichkeit wie man mittels JS einem background-image ein <img>-Objekt übergibt, anstatt eine URL?

Thx...

**wahsaga** · 19.06.2006, 09:07

Dass das Caching im IE alles andere als optimal gelöst ist, ist altbekannt.
Da hilft allerhöchstens, dass du auf deinem Rechner die Einstellungen anpasst.

HintergrundBilder vorladen