Feststellen ob Bild bzw. Hintergrundbild geladen wurde

[Horst K.]

Ich haben ein äusserst verzwicktes Problem:
ein <div>, dass beim onMouseOver eines anderen Elementes einen Hintergrund verpasst bekommt:

------------------------------------------------------------------
<div id="bg"></div>
<img src="test.jpg" onMouseOver="JavaScript:enablebg();">

<script type="text/javascript">
<!--
function enablebg()
{
document.getElementById('bg').style.backgroundImage = "url('bg.jpg')";
}
//-->
</script>
------------------------------------------------------------------

Da das Hintegrundbild recht gross ist, möchte ich ein "Bild wird geladen" über document.getElementById('bg').innerHTML o.ä. einblenden.
Dazu müsste ich aber den Ladezustand des Bildes wissen.
Ich habe schon mit complete und readyState experimentiert, aber beides funktioniert nicht sonderlich zuverlässig.

Kann mir da evtl. jemand aus der Patsche helfen?

[Struppi]

---

<div id="bg"></div>
<img src="test.jpg" onMouseOver="JavaScript:enablebg();">

Das Label 'javascript:' hat keine Bedeutung, kann aber u.U. zu Fehlermeldungen führen, in Browsern die keine JS-Label kennen.

Dazu müsste ich aber den Ladezustand des Bildes wissen.

Keine Chance.

Ich habe schon mit complete und readyState experimentiert, aber beides funktioniert nicht sonderlich zuverlässig.

Das stimmt.

Das einzige was zuverlässig funktioniert ist onload bzw. onerror
(nur unter ganz bestimmten Umständen hat der IE Probleme)

D.h. du kannst in deiner Funktion folgendes schreiben:

  
<script type="text/javascript">  
<!--  
function enablebg()  
{  
var img = new Image();  
img.onload = function()  
{  
document.getElementById('bg').style.backgroundImage = "url('bg.jpg')";  
}  
img.src = "bg.jpg";  
  
}  
//-->  
</script>  

Struppi.

[c300]

Hallo

Wie wäre es denn, wenn Du das Bild schon beim Seitenaufbau 'vorlädst'? Dann müsstest Du es nur noch anzeigen. zugegeben, dadurch verlängert sich halt die initilae Ladezeit deiner Seite.

Gruss

[Horst K.]

Wie wäre es denn, wenn Du das Bild schon beim Seitenaufbau 'vorlädst'? Dann müsstest Du es nur noch anzeigen. zugegeben, dadurch verlängert sich halt die initilae Ladezeit deiner Seite.

Das hatte ich bisher schon gemacht, in dem ich einfach ein style="background-image:url('bg.jpg');" eingebaut habe.
Das Problem ist, dass ich Seiten habe die bis zu 100 Hintergrundbilder à 150 KB enthalten.
Da "platzt" auch DSL-Usern die Leitung, vom Traffic auf dem Server mal ganz zu schweigen. ;-)

[Horst K.]

Das einzige was zuverlässig funktioniert ist onload bzw. onerror
(nur unter ganz bestimmten Umständen hat der IE Probleme)

Danke, Dein Codeschnipsel war genau das wonach ich gesucht habe! :)

Unter Firefox/Mozilla funktioniert das einwandfrei, aber unter dem IE läd er den Hintergrund immer wieder von neuem.
(der wird über style.backgroundPosition neu ausgerichtet sobald sich die Maus über dem normalen Bild bewegt)
Ist dass das was Du mit "nur unter ganz bestimmten Umständen hat der IE Probleme" meintest?
Siehst Du irgendeine Möglichkeit das zu umschiffen?

[Horst K.]

Unter Firefox/Mozilla funktioniert das einwandfrei, aber unter dem IE läd er den Hintergrund immer wieder von neuem.

Ich bin jetzt so weit, dass ich vermute, dass dieses Verhalten an dem miesen Caching des Internet Explorers liegt.
Bei ca. 90% der Bilder funktioniert das Caching, aber etwa 10% läd er immer wieder von neuem.

[Struppi]

Unter Firefox/Mozilla funktioniert das einwandfrei, aber unter dem IE läd er den Hintergrund immer wieder von neuem.

Hast du es mal online probiert?

Ich bin jetzt so weit, dass ich vermute, dass dieses Verhalten an dem miesen Caching des Internet Explorers liegt.

Ja genau daran liegt es.

Bei ca. 90% der Bilder funktioniert das Caching, aber etwa 10% läd er immer wieder von neuem.

Eigentlich sollte es zumindest online funktionieren (mit dem Protokoll http).

Struppi.

[Horst K.]

Bei ca. 90% der Bilder funktioniert das Caching, aber etwa 10% läd er immer wieder von neuem.

Eigentlich sollte es zumindest online funktionieren (mit dem Protokoll http).

Ich hab die Ursache:
die Grafiken, die vom IE nicht im Cache gespeichert werden enthalten laut den Grafik-Eigenschaften im Firefox Fehler:
"Die Grafik "..." kann nicht angezeigt werden, weil sie Fehler enthält."
Lusigerweise werden die Bilder aber in beiden Browsern einwandfrei dargestellt, aber nur der Firefox cacht sie, der IE dagegen nicht, deswegen lädt er das Bild jedesmal von neuem.

Vielen Dank für Deine Hilfe! :)