JavaScript Internet Explorer 6 und img.onload

[mercsen]

Moin moin,

Ich habe gerade eine Website fertigestellt und muss diese jetzt für den IE 6 optimieren. Leider ist sie sehr Interaktiv mit vielem Dynamischem Inhalt und sollte ohne Flash daher kommen, deshalb nutzt sie viel JavaScript und dort vorallem das Framework jQuery und jQuery UI.

Das man bei dem IE 6 abstriche machen muss ist mir klar, doch ich scheitere schon an der simplen Aufgabe eine Image preloder zu schreiben.
Der Sinn, bzw. die Idee dahinter ist das der gesamte "Dynamische" Inhalt direk zur verfügung steht und Animatinen und übergänge flott von statten gehen.
Das erste was nun also passiert wenn ein User auf die Website geht ist: Er bekommt einen Ladebildschrim zu sehen, schön animiert und alles.
Im debug modus kann ich sogar sehen wann welches bild geladen wurde etc.
Bei Chrome funktioniert alles ohne Probleme, sogar IE 8 + 9 (7 konnte ich noch nicht testen) spielen mit, firefox, safari, opera (mobile) etc. nur der IE 6 nicht.

Meine vermutung ist das es an dem img.onload liegt und der IE 6 da probleme bekommt wenn zu viele bilder geladen werden.

Um den fehler zu finden habe ich den Code auf das minimalste komprimiert und jQuery komplett aus dem Code geschmissen, der sieht jetzt also so aus:

function images_preload(lang) {
    lang = valiLanguage(lang);
    element_lang = 'elements_' + lang;

    bilder = new Array();
    
    bilder.push("bilder/designe/mainMenu/elements_de/resource.png");
    bilder.push("bilder/designe/mainMenu/elements_de/resource_glow.png");
    bilder.push("bilder/designe/mainMenu/elements_de/unternehmen.png");
    bilder.push("bilder/designe/mainMenu/elements_de/unternehmen_glow.png");
    bilder.push("bilder/designe/mainMenu/elements_de/training.png");
    bilder.push("bilder/designe/mainMenu/elements_de/training_glow.png");
    bilder.push("bilder/designe/mainMenu/elements_de/consulting.png");
    bilder.push("bilder/designe/mainMenu/elements_de/consulting_glow.png");
    bilder.push("bilder/designe/mainMenu/elements_de/produkte.png");
    bilder.push("bilder/designe/mainMenu/elements_de/produkte_glow.png");
    bilder.push("bilder/designe/mainMenu/elements_de/home.png");
    bilder.push("bilder/designe/mainMenu/elements_de/home_glow.png");

    l = bilder.length;
    pFrame = document.getElementById("preload_ladeframe");
    for(i = 0; i < l; i++) {
        img = new Image();
        img.src = bilder[i];
        
        img.onload = function() {
            pFrame.innerHTML += this.src +  '<br>';
        }
        
        img.onerror = function() {
           alert(this.src + ' FEHLSCHLAG');
       }
   }
}

meistens schafft er es so a die 3 Bilder zu laden, manchesmal aber auch gar keine, die onerror methide wird nur bemüht wenn ich absichtlich eine falsche URL eingebe und so langsam verzweifle ich.

Wenn ich in dem hervoragendem Script Debugger des IE 6 rumspiele und lange warte kann es sogar sein das er es schafft alle Bilder zu laden, also bin ich zu dem Schluss gekommen das image.onload zu viel für ihn ist.

Alternativ halte ich es aber auch für möglich das er den Code beendet wenn die Seite vollständig geladen ist. Ich habe keine Ahnung.

Kennt nun vlt. jemand einen workaround? Oder weiß wie man das problem umgehe kann? Sonst muss ich beim IE 6 eben auf das vorladen verzichten, aber ich denke das wird ohnehin nicht der einzige Abstrich sein .....

Doch ich weiß das wir das hier gemeinsam gelöst bekommen!

 

[Yuuri]

Weshalb macht ihr euch das alle so kompliziert?

<div style="position: absolute;top: -10000px;left: -10000px;">
  <img src="bild1.jpg" />
  <img src="bild2.jpg" />
  <!-- ... -->
</div>

 

[mercsen]

Ok ich habe die Lösung gefunden!!
http://onyrix.wordpress.com/2009/06/11/javascript-onload-image-cache-problem-with-internet-explorer/

wenn man beim IE 6, zuerst das attribute src setzt und dann die onload methode und das bild schon im cache ist, ruft der IE 6 die onload methode nicht mehr auf.

Mist ding, aber das weiß man ja

warum es so kompliziert ist?
Damit ich dem User eine genaue Anzeige geben kann wie weit das Laden fortgeschritten ist.
Im kompletten ausgbau hat man außerdem die möglichkeit das Laden abbzubrechen. Zudem gibt es die möglichkeit des "Beschleunigtem Surfens" dabei werden dann links, auf die der User demnächst wohl klicken wird, vorgeladen, bzw. deren Bilder werden auch schon vorgeladen damit auch diese Animationen flüßig von statten gehen (keine angst man kann das auch deaktivieren)

 

[Banthor]

Ok ich habe die Lösung gefunden!!
http://onyrix.wordpress.com/2009/06/11/javascript-onload-image-cache-problem-with-internet-explorer/

wenn man beim IE 6, zuerst das attribute src setzt und dann die onload methode und das bild schon im cache ist, ruft der IE 6 die onload methode nicht mehr auf.

Wenn man genau darüber nachdenkt, macht es aber Sinn. Das Bild ist schon fertig geladen und nachdem die Show schon gelaufen ist, sagst du, dass Du Dich für das Event interessierst.

Du erwartest bei einem onClick Handler ja auch nicht, dass er die Events, die vor dem Setzen des Handlers eintraten, nochmal geschickt werden.

Chrome hat bei onLoad übrigens auch seine Eigenheiten. Zumindest in der Version, die so um Februar/März aktuell war - da habe ich einen jQuery Plugin zum einfachn Laden von Bildern geschrieben. Hat man in Chrome ein src-Attribut erneut mit demselben Wert gesetzt, so wird ebenfalls kein onLoad Handler aufgerufen (im Gegensatz zu allen anderen Browsern). Natürlich kann man streiten, ob das korrekt ist. Ich habe mir in Diesem Fall damit geholfen, das Attribut vorher auf "#" zu setzen und dann erst auf den Zielwert, dann wird auch onload wieder getriggert.

 

[mercsen]

Eigentlich stimmt es schon, wäre aber gut wenn er erkennen würde das meine ganzen Anweisungen auf das selbe image abziehlen und er bevor er irgendwas anderes macht erstmal die Eigenschaften festlegt und dann schaut ob esim cache ist o.ä.

naja ich habe zwischendurcg wieder de alten bug bekommen das er nicht alle Läder vorlädt, diesesmal stellte sich raus das der IE 6 probleme mit dem erstellen von zu vielen TextNodes hat, nämlich wenn alle Bilder im Cache sind verhackelt der sich beim erstellen der Textnodes, nur für den Fall das hier mal wer pre google drauf stößt.