Goeran Zängerlein: Ladestatus von Bildern

Hallo Java-Script Profis,

ich habe ein Problem mit einem selbstgeschriebenen JavaScript.
Sinn ist es, festzustellen ob alle Bilder eines Dokumentes fertig
geladen wurden, und wenn dies der Fall ist, soll auf eine neue
Seite gesprungen werden. Leider funktioniert die Funktion zur
Erkennung des Ladezustandes eines Bildes nicht richtig. Das
Script gibt immer das Ergebnis zurück, daß Bild sei noch nicht
fertig geladen.
Könnten Sie bitte einen Blick auf das angehängte Script werfen,
und versuchen den Fehler zu finden? Ich habe bereits ein paar
Leute gefragt, die konnten mir aber auch nicht helfen.

Ach ja, wie bekomme ich es im IE 3.0 zum laufen? Der kennt das
images Objekt scheinbar nicht!

Hier das Script sorry, etwas lang...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script LANGUAGE="JAVASCRIPT">
// Es sollte folgendes passieren:
// Beim Aufrauf der Funktion
function CheckIt()
{
  var Status = 0;
//Es wird fuer jedes Bild im Dokument ueberprueft
//"i < doc..." und nicht "i <= doc..." weil die Bilder von JavaScript intern ab 0 gezaehlt werden,
// document.images.length aber den absoluten Wert also eins mehr zurueckgibt.
  for(i = 0; i < document.images.length; ++i)
   {
//ob es vollstaendig geladen wurde
    if(document.images[i].complete == true)
//wenn dies bei einem der Bilder der Fall ist, so sollte sich Status ums eins erhoehen.
// HIER LIEGT DAS PROBLEM: Obwohl das Bild fertig geladen sein sollte, wird FALSE zurueckgegeben.
  Status = Status + 1;
   }

//wenn Status gleich der Zahl der Bilder im Dokument ist waeren alle Bilder geladen und es koennte zur
//Folgeseite gesprungen werden.  
  if(Status == document.images.length) window.location.href = "no.htm";

// Variablencheck - der Wert wird ausgegeben waerend das Script ablaeuft
var text = "Status = " + Status + "\n" + "docimgcompl="+document.images[0].complete + "\n";
alert(text + "document.images.length = "+document.images.length);

//Das Script ruft sich nach einer Sekunde selbst neu auf. Vielleicht sind die  Bilder schon fertig geladen.
// Auskommentier, da sonst der Browser zusammen mit dem Variablencheck blockiert wird
// Bei einem kleinen GIF sollte das aber egal sein.
// window.setTimeout("CheckIt()",1000);
  
}
</SCRIPT>

</head>

<body>

<!-- Irgendein Bild mit evtl. Pfad -->
<img src="egal.gif"><BR>
<script Language="JAVASCRIPT">
//Die Funktion wird das 1. Mal nach einer Sekunde aufgerufen.
window.setTimeout("CheckIt()",1000);
</SCRIPT>
</body>
</html>

Gruß Goeran

  1. Hallo,

    gleich mal vorab, ich habe nicht alles genau angesehen, ist ganz schoen lang.

    Ach ja, wie bekomme ich es im IE 3.0 zum laufen? Der kennt das
    images Objekt scheinbar nicht!

    Nicht nur scheinbar. Er kennt es nicht.
    Den musst Du ausschliessen, keine andere Chance, also
    if (document.images)
    {
    // der ganze Image-Kram
    }

    if(document.images[i].complete == true)
    //wenn dies bei einem der Bilder der Fall ist, so sollte sich Status ums eins erhoehen.
    // HIER LIEGT DAS PROBLEM: Obwohl das Bild fertig geladen sein sollte, wird FALSE zurueckgegeben.

    Was benutzt Du fuer einen Browser?
    complete ist schoen und gut, funktioniert aber nicht mit allen Browsern.
    Konkret weiss ich das vom Navi4.03 bei animierten GIFs, "true" tritt nie ein.
    Ich mache das so, dass ich die Abfragerei nach gewisser Zeit abbreche.
    Ergebnis:
    (1) Browser, die mit complete umgehen koennen, melden "fertig", es kann weitergehen
    (2) Browser, die das nicht koennen, brechen eben nach der angegebenen Zeit ab, haben aber auch geladen.
    Was kann passieren?
    Verbindung ist extrem langsam, Abbruch tritt auch bei Browsern aus (1) ein.
    Tragisch?
    In der Regel nicht. Solche Funktionen werden normal benutzt, um Bilder vorzuladen, damit sie also im Cache sind, wenn sie wirklich gebraucht werden.
    In dem genannten Fall sind sie das evtl. dann nicht, oder nicht alle. Das verlangsamt u.U. die eigentliche Aktion etwas, bringt aber keine Fehler und sonst keine Einschraenkungen.

    Alternative (nie probiert, weil nicht bisher nicht gebraucht):
    Verwende onload fuer die Image-Objekte. Das sollte ab Navi3 eigentlich klappen, es sei denn, es handelt sich um animierte GIFs. Bei denen bist Du auf complete angewiesen.

    Christine