Bilder vorladen - Problem bei IE7

[td22]

Hallo, ich versuche gerade experimentell eine größere Anzahl von Fotos nacheinander auf eine Seite zu laden. Zuerst wollte ich das mit AJAX machen, dann habe ich gemerkt, dass es ja auch mit ganz simplem JavaScript möglich ist. Irgendwo habe ich auch den Trick gefunden, die Bilder erst in der Größe 1x1 zu laden und anschließend zu vergrößern.

Das Script läuft noch nicht rund, aber unter Opera läuft es immerhin schon prinzipiell richtig. Internet Explorer gibt dagegen folgende Meldung aus:
Zeile 25, Zeichen 4
Unbekannter Laufzeitfehler, Code: 0

Es handelt sich dabei um folgende Zeile:
document.getElementById("bilderweg").innerHTML += "<td><img id=\"" + mm + "\" width=\"1\" height=\"1\" hspace=\"10\" src=\"bild" + mm + ".jpg\" onload=\"window.setTimeout('foto_laden(" + m + ")', 300);\"></td>";

Das ganze Skript könnt ihr unter der URL einsehen. Ich bin auch dankbar für jede andere Lösung zum Preload von Grafiken - eigentlich müsste das ja eine Standardanforderung sein, für die es schon fertige Snippets gibt.

Danke, Andreas

[ChrisB]

Hi,

Internet Explorer gibt dagegen folgende Meldung aus:
Zeile 25, Zeichen 4
Unbekannter Laufzeitfehler, Code: 0

Es handelt sich dabei um folgende Zeile:
document.getElementById("bilderweg").innerHTML += "<td><img id=\"" + mm + "\" width=\"1\" height=\"1\" hspace=\"10\" src=\"bild" + mm + ".jpg\" onload=\"window.setTimeout('foto_laden(" + m + ")', 300);\"></td>";

Dass es sich bei dem, was du einfuegen willst, um eine Tabellenzelle handelt, laesst vermuten, dass das, *worin* du einfuegen willst, eine Tabellenzeile ist - und u.a. fuer TR hat MicroSoft innerHTML als read-only definiert.

Ich bin auch dankbar für jede andere Lösung zum Preload von Grafiken - eigentlich müsste das ja eine Standardanforderung sein, für die es schon fertige Snippets gibt.

Du musst die Bilder nicht in Groesse 1*1 ins Dokument einfuegen, damit sie vorgeladen werden - neue JavaScript-Imageobjekte zu erzeugen, reicht aus. Das Anwendungsbeispiel Dynamische grafische Buttons macht's vor.

MfG ChrisB

[td22]

Vielen Dank für den Tipp mit innerHTML. Daran wird es wohl liegen, "bilderweg" ist tatsächlich ein <tr>.

Du musst die Bilder nicht in Groesse 1*1 ins Dokument einfuegen, damit sie vorgeladen werden - neue JavaScript-Imageobjekte zu erzeugen, reicht aus. Das Anwendungsbeispiel Dynamische grafische Buttons macht's vor.

Das Beispiel kenne ich und finde es auch wesentlich eleganter als die Lösung mit dem 1*1 anzeigen. Allerdings weiß ich nicht, wie ich beim Imageobjekt prüfen kann, ob das Objekt schon vollständig übertragen wurde. Geht das irgendwie?

[ChrisB]

Hi,

Das Beispiel kenne ich und finde es auch wesentlich eleganter als die Lösung mit dem 1*1 anzeigen. Allerdings weiß ich nicht, wie ich beim Imageobjekt prüfen kann, ob das Objekt schon vollständig übertragen wurde. Geht das irgendwie?

Ja - such mal im Archiv nach der Thematik in Verbindung mit den Events onload/oncomplete/onerror.

MfG ChrisB

[td22]

Hmm, wirklich fündig bin ich bisher nicht gefunden. Oncomplete scheint es in JavaScript gar nicht zu geben und onload und onerror sind nur EventHandler. Laut der <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#img@title=Referenz von SelfHTML> gibt es wohl keine vergleichbaren Eigenschaften des img-Objekts.

Bitte korrigiert mich, wenn ich das falsch sehe.

Gruß
Andreas

[ChrisB]

Hi,

Hmm, wirklich fündig bin ich bisher nicht gefunden. Oncomplete scheint es in JavaScript gar nicht zu geben und onload und onerror sind nur EventHandler.

Ja eben, und "Bild fertig geladen" oder "Bild konnte nicht geladen werden" sind Events, die Eintreten koennen, wenn man per JavaScript ein neues Image-Objekt erzeugt und ihm eine src-Eigenschaft zuweist.

Laut der <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#img@title=Referenz von SelfHTML> gibt es wohl keine vergleichbaren Eigenschaften des img-Objekts.

Doch, die Browser feuern diese Events beim Laden von Bildern.
Nur, weil's in SELFHTML nicht dokumentiert ist, heisst das nicht, dass es das "nicht gibt".

MfG ChrisB

[td22]

Hallo Chris,

ich glaub, wir reden aneinander vorbei. Derzeit löse ich das Problem ja bereits mit dem EventHandler onload. Auf diese Weise erreiche ich, dass erst wenn ein Bild vollständig geladen ist, das nächste geladen wird. Ich hab mal versucht, die Funktion aufs wesentliche zu reduzieren:

  
function foto_laden(n) {  
  document.getElementById("preload").innerHTML = "<img id=\"bild" + n + "\" src=\"fotos/bild" + n + ".jpg\" onload=\"foto_laden(" + n + 1 + ")\";\">"  
}  

Wenn ich jetzt das Image-Objekt à la MeinBild = new Image() hernehme, dann gibt es meines Wissens keine Möglichkeit, mit einer if-Bedingung abzufragen, ob MeinBild schon vollständig geladen wurde. Falls du eine solche Möglichkeit kennst, dann schreib sie doch bitte. (MeinBild.onLoad scheint auf jeden Fall nicht zu funktionieren, habe ich schon probiert)

Eine Möglichkeit, das Image-Objekt über den Event-Handler anzusteuern, sehe ich gerade absolut nicht. Vielleicht steh ich ja total auf dem Schlauch? Falls du ne Alternative siehst, wärs nett, wenn du mir auf die Sprünge hilfst.

Andreas

[ChrisB]

Hi,

Wenn ich jetzt das Image-Objekt à la MeinBild = new Image() hernehme, dann gibt es meines Wissens keine Möglichkeit, mit einer if-Bedingung abzufragen, ob MeinBild schon vollständig geladen wurde. Falls du eine solche Möglichkeit kennst, dann schreib sie doch bitte. (MeinBild.onLoad scheint auf jeden Fall nicht zu funktionieren, habe ich schon probiert)

Natuerlich funktioniert das nicht, JavaScript behandelt Bezeichner case-sensitive. onLoad != onload.

Und dass du dieser Eigenschaft eine Funktionsreferenz zuzuweisen hast, sollte hoffentlich auch klar sein.

MfG ChrisB

[td22]

Natuerlich funktioniert das nicht, JavaScript behandelt Bezeichner case-sensitive. onLoad != onload.

Ja - genau deswegen hab ich ja onLoad geschrieben ... kannte ja bisher nur den EventHandler, und der heißt meines Wissens onLoad. Hab jetzt anscheinend endlich mal das richtige bei Google eingegeben und eine Menge Anleitungen gefunden:
http://www.google.com/search?q=image+object+onload+javascript

Und dass du dieser Eigenschaft eine Funktionsreferenz zuzuweisen hast, sollte hoffentlich auch klar sein.

Nein, war mir nicht klar. Was ist denn eine Funktionsreferenz? Und wie kann man sie einer Eigenschaft zuweisen?

Ich programmier gerade seit einem Jahrzehnt oder so zum ersten Mal wieder mit JavaScript, wenn ich Profi wär würde ich hier nicht so viel fragen :)

Andreas

[Struppi]

Natuerlich funktioniert das nicht, JavaScript behandelt Bezeichner case-sensitive. onLoad != onload.

Ja - genau deswegen hab ich ja onLoad geschrieben ... kannte ja bisher nur den EventHandler, und der heißt meines Wissens onLoad.

Nein, er heißt definitiv onload.

Und dass du dieser Eigenschaft eine Funktionsreferenz zuzuweisen hast, sollte hoffentlich auch klar sein.

Nein, war mir nicht klar. Was ist denn eine Funktionsreferenz? Und wie kann man sie einer Eigenschaft zuweisen?

Eine Funktionsreferenz ist eine Referenz auf eine Funktion.

var meinAlert = alert; // <-- meinAlert ist eine Referenz auf alert  
meinAlter('Hallo'); // ruft alert() auf.  

Du kannst auch eine anonyme Referenz nehmen und dem Event zuweisen

img.onload = function() {  
alert(this);  
};  

Das alert wird nach dem laden des Bildes aufgerufen.

Struppi.

[td22]

Eine Funktionsreferenz ist eine Referenz auf eine Funktion.

var meinAlert = alert; // <-- meinAlert ist eine Referenz auf alert

meinAlter('Hallo'); // ruft alert() auf.

  
Hallo Struppi,  
  
vielen Dank für die einfache Erklärung. Dann kannte ich das Prinzip sogar schon, wusste nur nicht, dass man so etwas Reference nennt. Das Beispiel mit der "anonymen Referenz" kann ich nicht ganz nachvollziehen, bzw. weiß nicht so recht, wozu das gut sein soll. Aber das benötige ich ja wahrscheinlich nicht.  
  
Irgendwo ist bei mir allerdings immer noch der Wurm drin; weiß nicht, was ich falsch mache:  
  
~~~javascript
  
meinbild = new Image();  
meinbild.src = "bild01.jpg";  
if (meinbild.onload) {  
  alert("If-Bedingung erfüllt");  
  document.writeln("<img src='bild01.jpg' />");  
}  

Andreas

[Struppi]

Irgendwo ist bei mir allerdings immer noch der Wurm drin; weiß nicht, was ich falsch mache:

meinbild = new Image();
meinbild.src = "bild01.jpg";
if (meinbild.onload) {
  alert("If-Bedingung erfüllt");
  document.writeln("<img src='bild01.jpg' />");
}

  
Du fragst einfach ab, ob ein onload Handler definiert wurde, es wurde aber keiner definiert.  
  
~~~javascript
  
var meinbild = new Image();  
meinbild.src = "bild01.jpg";  
meinbild.onload = function() {  
alert("If-Bedingung erfüllt");  
//   document.writeln("<img src='bild01.jpg' />");  
}  

Das document.writeln kannst du hier wahrscheinlich vergessen, da damit das Dokument überschrieben wird.

Struppi.

[td22]

Du fragst einfach ab, ob ein onload Handler definiert wurde, es wurde aber keiner definiert.

Meinst du damit das, was du im Code geändert hast, also das var? Hast du mal versucht, ob die If-Bedingung bei dir erfüllt ist? Bei mir kann ich es leider immer noch nicht nachvollziehen.

[ChrisB]

Hi,

Du fragst einfach ab, ob ein onload Handler definiert wurde, es wurde aber keiner definiert.

Meinst du damit das, was du im Code geändert hast, also das var?

Nein - wenn du mal ueber die erste Zeile hinausliest, sollte dir das auch auffallen.

Struppi hat das in den Code eingefuegt, was wir jetzt schon mehrfach erwaehnt haben - er hat dem Eventhandler-Attribut des Images eine Funktionsreferenz zugewiesen.

MfG ChrisB