Wozu einen Image()-Konstruktor?

[amolip]

Hallo,

mit »document.createElement("img")« wird ein HTMLImageElement-Objekt gemäß HTML-DOM erzeugt.

Mit dem Konstruktor »Image()« ebenfalls.

Das img-Element ist das einzige HTML-Element für das es einen Konstruktor gibt. Alle anderen Elementen müssen mit der createElement()-DOM-Methode erzeugt werden.

Zwei Dinge frage ich mich jetzt bzw. euch :-)

Warum gibt es den Image()-Konstruktor überhaupt? Kann das einfach historische Gründe haben, in dem Sinne, dass er eingeführt wurde als das DOM noch keine Bedeutung hatte?

Ich würde gerne, um die Dinge einheitlich zu handhaben, auf den Konstruktor verzichten und stattdessen mit »createElement("img")« arbeiten. Stichprobenartig habe ich beide Varianten verglichen und kann in der Funktionsweise, insbesondere in bezug auf events, keinen Unterschied feststellen.

var bild1 = document.createElement("img");
        //alert(bild1); //HTMLImageElement

bild1.onload = foo_bild1; //wird gefeuert
        bild1.onerror = bar_bild1; //wird gefeuert

bild1.src = "Flaggen/Deutschland.gif";

var bild2 = new Image();
        //alert(bild2); //HTMLImageElement

bild2.onload = foo_bild2; //wird gefeuert
        bild2.onerror = bar_bild2; //wird gefeuert

bild2.src = "Flaggen/Frankreich.gif";

alert(bild1.complete + " - " + bild2.complete); //okie dokie

var test = document.getElementById("test");
        test.appendChild(bild1);
        test.appendChild(bild2);

Getestet habe ich mit FF 2.x und IE 7.x. Können eventuell andere oder ältere Browser damit Probleme haben?
Spricht irgend etwas gegen den Verzicht des Image()-Konstruktors?

Gruß Uwe

[Cheatah]

Hi,

Warum gibt es den Image()-Konstruktor überhaupt? Kann das einfach historische Gründe haben, in dem Sinne, dass er eingeführt wurde als das DOM noch keine Bedeutung hatte?

als es sowas wie DOM noch gar nicht gab. Das Image-Objekt hatte sinngemäß den Zweck, Grafiken zu referenzieren, um sie innerhalb der document.images-Collection einsetzen zu können.

Ich würde gerne, um die Dinge einheitlich zu handhaben, auf den Konstruktor verzichten und stattdessen mit »createElement("img")« arbeiten.

Go ahead.

Stichprobenartig habe ich beide Varianten verglichen und kann in der Funktionsweise, insbesondere in bezug auf events, keinen Unterschied feststellen.

Derjenige, der bei solchen Sachen gerne Probleme macht, ist der IE: Wenn es spezielle Methoden für etwas gibt, funktionieren diese gewöhnlich besser (bzw. überhaupt) als die allgemeinen. Per DOM im IE Tabellenzeilen umzusortieren oder <select>-Felder dynamisch zu befüllen ist ... nun ja. Aber was <img>-Elemente betrifft, sind mir keine Probleme bekannt, die von seiner Unfähigkeit, zwischen HTML-Attributen und JavaScript-Eigenschaften zu unterscheiden, abweichen (Stichwort relative kontra absolute URLs).

Getestet habe ich mit FF 2.x und IE 7.x.

Teste in einem aktuellen Firefox und im IE 6. Der IE 7 ist tendenziell eine Dreingabe.

Spricht irgend etwas gegen den Verzicht des Image()-Konstruktors?

"new Image().src = '//example.com/do/statistics';" ist vom Code her kürzer und überschaubarer als die Alternative. Ansonsten: Nö.

Cheatah

[amolip]

Hallo Cheatah,

danke für deine Antwort.

Teste in einem aktuellen Firefox ...

Unter FF 2.x habe ich jetzt einfach mal die 2er Versionen subsumiert. Tatsächlich habe ich 2.0.0.14. Das sollte doch der aktuelle sein?

... und im IE 6.

Nee, keine Lust. Wenn's damit nicht läuft, läuft's halt nicht und irgendjemand wird's mir dann früher oder später schon unter die Nase reiben :-)

new Image().src = '//example.com/do/statistics';

Das funktioniert bei mir nicht. Es wird ein Stringobjekt erzeugt und wenn ich das dann ins DOM einhänge gibt's 'ne Exception: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"

var bild3 = new Image().src = "Flaggen/Frankreich.gif";
        alert(typeof(bild3)); //string
        test.appendChild(bild3); //Exception

Gruß Uwe

[Cheatah]

Hi,

Teste in einem aktuellen Firefox ...
Unter FF 2.x habe ich jetzt einfach mal die 2er Versionen subsumiert.

jepp, ich hab's nur verallgemeinert.

... und im IE 6.
Nee, keine Lust. Wenn's damit nicht läuft, läuft's halt nicht und irgendjemand wird's mir dann früher oder später schon unter die Nase reiben :-)

Im IE 7 gibt es zwar immer noch ziemlich viele Fehler, aber im Vergleich zu seinem Vorgänger ist das Ding regelrecht Spitzenklasse. Im IE 7 zu testen ist gut, aber nicht im IE 6 zu testen ist ... mutig.

new Image().src = '//example.com/do/statistics';
Das funktioniert bei mir nicht.

Doch, tut es.

Es wird ein Stringobjekt erzeugt und wenn ich das dann ins DOM einhänge

Wer hat gesagt, dass Du das tun sollst? Beachte auch die o.g. URL :-)

Cheatah

[amolip]

Hallo Cheatah,

nicht im IE 6 zu testen ist ... mutig.

Der IE geht mir auf den Senkel :-(
Wo ich es mir leisten kann, beispielsweise auf meiner Webseite, lasse ich ihn komplett aussen vor. Dass dann verschiedene Sachen nicht "funktionieren", ist nicht mein Problem.

new Image().src = '//example.com/do/statistics';
Das funktioniert bei mir nicht.
Doch, tut es.
Beachte auch die o.g. URL :-)

Ich hatte auch eine absolute URL ausprobiert, hat aber auch nicht funktioniert. Ich stehe jetzt auf dem Schlauch und weiß nicht was du meinst. Mich irritiert auch, dass du als Ressource nicht den Dateinamen angibst, also »...statistics.gif«. Wie ich dich kenne, steckt da bestimmt eine "Gemeinheit" dahinter ;-)))

Ich hätte jetzt gedacht, dass das img-Objekt dann vielleicht in der images-Collection "drin ist". Ist es aber nicht.

alert(document.images.length); // 3
        //new Image().src = '//.../.../Flaggen/Frankreich.gif';
        new Image().src = 'http://.../.../Flaggen/Frankreich.gif';
        alert(document.images.length); // 3

Gruß Uwe

[Der Martin]

Hallo Uwe,

new Image().src = '//example.com/do/statistics';
Das funktioniert bei mir nicht.
Doch, tut es.
Beachte auch die o.g. URL :-)

Ich hatte auch eine absolute URL ausprobiert, hat aber auch nicht funktioniert. Ich stehe jetzt auf dem Schlauch und weiß nicht was du meinst.

die Ressource, die mit der src-Eigenschaft angegeben ist, wird durchaus abgerufen, aber Cheatah will sie trotzdem nicht ins DOM einhängen. Achte mal besonders auf den letzten Teil der URL - was fällt dir auf? Was fällt dir ein?

Mich irritiert auch, dass du als Ressource nicht den Dateinamen angibst, also »...statistics.gif«. Wie ich dich kenne, steckt da bestimmt eine "Gemeinheit" dahinter ;-)))

Keineswegs. Nur der Wink mit dem Zaunpfahl, dass man URLs, Ressourcen und Dateien bitte unterscheiden möge.

alert(document.images.length); // 3
        new Image().src = 'http://.../.../Flaggen/Frankreich.gif';
        alert(document.images.length); // 3

Warum sollte das images-Array sich verändern, wenn doch überhaupt nichts mit ihm gemacht wird?

Ciao,
 Martin

[amolip]

Hallo Martin,

new Image().src = '//example.com/do/statistics';

die Ressource, die mit der src-Eigenschaft angegeben ist, wird durchaus abgerufen, ... Achte mal besonders auf den letzten Teil der URL - was fällt dir auf? Was fällt dir ein?

Ich ahne etwas :-) Die Ressource wird abgerufen, wie die Statistik zeigt?

aber Cheatah will sie trotzdem nicht ins DOM einhängen.

Aber ich :-) Deswegen verstehe ich nicht, was Cheatah mir sagen will.

Ich stehe immer noch auf dem Schlauch, ich glaube ich muss das erst einmal überschlafen.

Warum sollte das images-Array sich verändern, wenn doch überhaupt nichts mit ihm gemacht wird?

Eben - das war pure Verzweiflung von mir :-)

Gruß Uwe

[Der Martin]

Hallo,

new Image().src = '//example.com/do/statistics';
Ich ahne etwas :-) Die Ressource wird abgerufen, wie die Statistik zeigt?

nicht nur das - die Ressource wird abgerufen, und jemand freut sich, dass er unauffällig und ohne Nebenwirkungen seine Statistik führen kann.

Warum sollte das images-Array sich verändern, wenn doch überhaupt nichts mit ihm gemacht wird?
Eben - das war pure Verzweiflung von mir :-)

Oh je - wirklich so schlimm?
So long,
 Martin

[amolip]

Hallo Martin,

Eben - das war pure Verzweiflung von mir :-)

Oh je - wirklich so schlimm?

Ja - *schluchz* - da siehst du mal wohin Cheatah einen treiben kann ;-)

Gruß Uwe

[amolip]

Also Cheatah, du alter Kryptologe :-)

new Image().src = '//example.com/do/statistics';
Das funktioniert bei mir nicht.

Doch, tut es.

Mit »new Image().src = "Flaggen/Frankreich.gif";« wird die entsprechende Ressource angefordert. Das habe ich kapiert.

Nur habe ich mir jetzt gesagt, schön und gut, aber wieso soll ich eine Ressource anfordern, wenn ich sie gar nicht weiterverarbeiten kann?

Wozu also - um Himmels Willen - solch ein Konstrukt?

Die banale Antwort: Zum Vorladen!

Gruß Uwe

[molily]

Hallo,

Image-Objekt hatte sinngemäß den Zweck, Grafiken zu referenzieren, um sie innerhalb der document.images-Collection einsetzen zu können.

In Netscape-JavaScript waren Layer m.W. die einzige Möglichkeit, Inhalte hinzuzufügen, nur so konnte man indirekt neue Bilder zum Dokument hinzufügen. Dazu war new Image nicht nötig, weil man layer.document.write benutzte man, man konnte also mit den Image-Objekten direkt nichts derartiges anstellen.

Mathias

[Cheatah]

Hi,

Image-Objekt hatte sinngemäß den Zweck, Grafiken zu referenzieren, um sie innerhalb der document.images-Collection einsetzen zu können.
In Netscape-JavaScript waren Layer m.W. die einzige Möglichkeit, Inhalte hinzuzufügen, nur so konnte man indirekt neue Bilder zum Dokument hinzufügen.

ja, ich meinte den Austausch bestehender Grafiken über die src-Eigenschaft. Das wurde IIRC schon vor document.layers mit Image-Objekten gemacht.

Cheatah

[molily]

Hallo,

mit »document.createElement("img")« wird ein HTMLImageElement-Objekt gemäß HTML-DOM erzeugt.

Mit dem Konstruktor »Image()« ebenfalls.

Image und HTMLImageElement sind grundsätzlich eigentlich zwei paar Schuhe. Im Firefox scheinen sie identisch, aber wenn ich mich recht erinnere, sind sie das nicht in jeder Hinsicht, auch wenn new Image und document.createElement("img") dasselbe zu ergeben scheinen. In anderen Browsern sind Image und HTMLImageElement m.W. nicht dermaßen aneinandergekoppelt und austauchbar (auch hier: wenn ich mich recht erinnere, ich hatte damit letztens noch herumexperimentiert). Kein Wunder, das ist nirgends standardisiert.

Das img-Element ist das einzige HTML-Element für das es einen Konstruktor gibt.

Nein, es gibt z.B. auch noch Option.

Warum gibt es den Image()-Konstruktor überhaupt? Kann das einfach historische Gründe haben, in dem Sinne, dass er eingeführt wurde als das DOM noch keine Bedeutung hatte?

new Image ist bloß fürs Vorladen gedacht.
Das Erzeugen von img-Elementen hat damit erstmal weniger zu tun, ich weiß z.B. nicht, ob beim Setzen des src-Attributs die Ressource schon geladen wird. Sinnvoll wäre es nicht, schließlich ist das Element noch nirgends eingehängt.

Stichprobenartig habe ich beide Varianten verglichen und kann in der Funktionsweise, insbesondere in bezug auf events, keinen Unterschied feststellen.

Wenn createElement für deine Zwecke funktioniert, dann nimm es.

Mathias

[Cheatah]

Hi,

new Image ist bloß fürs Vorladen gedacht.
[...] ich weiß z.B. nicht, ob beim Setzen des src-Attributs die Ressource schon geladen wird. Sinnvoll wäre es nicht, [...]

Warning: Contradiction detected ;-)

Ernsthaft: Nach meiner Erfahrung reicht das Setzen der src-Eigenschaft eines Image-Objektes aus, um die Ressource anzufordern (Cache mal außer Acht gelassen). Zumindest erfährt unsere Statistik hierdurch eine große Varianz an Browsern. Wie weit dieses Vorgehen in Richtung der älteren Semester funktioniert, vermag ich nicht zu beurteilen; aber die Generation dieses Jahrtausends sollte sich so verhalten.

Wenn createElement für deine Zwecke funktioniert, dann nimm es.

Jupp.

Cheatah

[molily]

Hallo,

new Image ist bloß fürs Vorladen gedacht.
[...] ich weiß z.B. nicht, ob beim Setzen des src-Attributs die Ressource schon geladen wird. Sinnvoll wäre es nicht, [...]

Warning: Contradiction detected ;-)

Der zweite Satz ging über createElement (»Das Erzeugen von img-Elementen hat damit erstmal weniger zu tun«), der erste über new Image. Wo ist da ein Widerspruch?

Mathias

[amolip]

Hallo Mathias,

vielen Dank für deine Antwort.

Das img-Element ist das einzige HTML-Element für das es einen Konstruktor gibt.
Nein, es gibt z.B. auch noch Option.

Wusste ich nicht.

new Image ist bloß fürs Vorladen gedacht.
Das Erzeugen von img-Elementen hat damit erstmal weniger zu tun, ich weiß z.B. nicht, ob beim Setzen des src-Attributs die Ressource schon geladen wird.

Doch das Vorladen funktioniert auch mit createElement().

var bild1 = document.createElement("img");
        //alert(bild1); //HTMLImageElement

bild1.onload = foo_bild1; //wird gefeuert
        bild1.onerror = bar_bild1; //wird gefeuert

bild1.src = "Flaggen/Deutschland.gif";

Gruß Uwe

[Cybaer]

Hi,

mit »document.createElement("img")« wird ein HTMLImageElement-Objekt gemäß HTML-DOM erzeugt.

Netscape/Mozilla hat erst mit der 5. Browsergeneration das heutige DOM eingeführt. Da war JS 1.5 aktuell.

Mit dem Konstruktor »Image()« ebenfalls.

Die Image-Collection gibt es hingegen seit JS 1.1.

Warum gibt es den Image()-Konstruktor überhaupt? Kann das einfach historische Gründe haben, in dem Sinne, dass er eingeführt wurde als das DOM noch keine Bedeutung hatte?

Das, was es damals gab, wird heute als "DOM 0" bezeichnet. Also frühe Vorläufer - irgendwie. ;-)

Spricht irgend etwas gegen den Verzicht des Image()-Konstruktors?

Fehlende Abwärtskompatilität.

Wenn Du aber ohnehin an anderer Stelle DOM verwendest: Nein.

Gruß, Cybaer

[amolip]

Hallo Cybaer,

danke für deine Infos.

Gruß Uwe