Gibt es einen Unterschied zwischen `new Image()` und `document.createElement(‘img’)`?

Lesezeit: 6 Minuten

In Javascript kann ich tun:

img1 = new Image();
img2 = document.createElement('img');

Meine Frage ist, gibt es einen Unterschied zwischen den beiden Ansätzen? Das habe ich irgendwo gelesen Image, Formund Element wird genannt Host-Objekte, Ist das wahr? Wenn ja, was sind Host-Objekte?

Welche Vorgehensweise ist vorzuziehen?

  • Wo new Image ist definiert?

    – Ciro Santilli Путлер Капут 六四事

    12. Juni 2014 um 20:21 Uhr


Benutzer-Avatar
Felix Klinge

Ich konnte keine detaillierte Referenz finden, aber basierend auf dem Kommentar in der MDC – HTMLImageElement Beispiel, es scheint, dass Image ist Teil des DOM-Levels 0, während document.createElement ist Teil von DOM-Level 2.

DOM Level 0 wurde von Netscape erfunden und bot eine Möglichkeit, auf bestimmte Elemente der Website zuzugreifen. Grundsätzlich unterstützen es alle Browser aus Gründen der Abwärtskompatibilität.
Aber ehrlich gesagt verstehe ich das nicht warum das Image Konstruktor existiert dort, weil es, soweit ich es verstanden habe, keine Möglichkeit dazu gab manipulieren das Dokument mit DOM-Level 0. Möglicherweise wurde es nur intern vom Browser verwendet, um die Objekte zu erstellen.

DOM Level 2 ist ein offizieller Standard, der vom W3C entwickelt wurde.

Weitere Informationen zu den DOM-Levels finden Sie unter quirksmode.org – Level 0 DOM und Wikipedia.


Das habe ich irgendwo gelesen Image, Formund Element wird genannt Host-ObjekteIst das wahr?

Ja.

Wenn ja, was sind Host-Objekte?

Das ECMAScript-Spezifikation motiviert Host-Objekte auf diese Weise:

ECMAScript ist eine objektorientierte Programmiersprache zum Durchführen von Berechnungen und zum Manipulieren von Rechenobjekten innerhalb einer Hostumgebung. ECMAScript, wie es hier definiert ist, soll nicht rechenautark sein; Tatsächlich gibt es in dieser Spezifikation keine Bestimmungen für die Eingabe externer Daten oder die Ausgabe von berechneten Ergebnissen. Stattdessen wird erwartet, dass die Rechenumgebung eines ECMAScript-Programms nicht nur die in dieser Spezifikation beschriebenen Objekte und andere Einrichtungen bereitstellt, sondern auch bestimmte umgebungsspezifische Host-Objekte, deren Beschreibung und Verhalten den Umfang dieser Spezifikation sprengen, außer um dies anzuzeigen Sie können bestimmte Eigenschaften bereitstellen, auf die zugegriffen werden kann, und bestimmte Funktionen, die von einem ECMAScript-Programm aufgerufen werden können.

und

Host-Objekt

Objekt, das von der Hostumgebung bereitgestellt wird, um die Ausführungsumgebung von ECMAScript zu vervollständigen.
HINWEIS Jedes Objekt, das nicht nativ ist, ist ein Host-Objekt.

Jedes Objekt, das nicht in der Spezifikation definiert ist und von der Umgebung bereitgestellt wird, ist also a Host-Objekt. Dies sind beispielsweise in einem Browser (unter anderem): window, document und console.

  • Gute Antwort! Ich wollte fragen, warum document betrachtet Host-Objekt? Ist es nicht in der DOM-Level-1-Spezifikation definiert? w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document

    – rickchristie

    5. Juni 2011 um 9:10 Uhr

  • @rickchristie: Verwechseln Sie die DOM-Spezifikation nicht mit der ECMAScript-Spezifikation. document wird vom Browser als Schnittstelle für JavaScript bereitgestellt, um auf das DOM zuzugreifen. Es ist nicht Teil der ECMAScript-Spezifikation (von JavaScript selbst).

    – Felix Klinge

    5. Juni 2011 um 9:12 Uhr


  • DOM0 ist ein informeller Name für Pre-DOM-Level-1-Methoden zur Bearbeitung des Dokuments in Browsern. Verwendung der Image Der Konstruktor wurde hauptsächlich verwendet, um Bilder, die dynamisch innerhalb der Seite verwendet werden, in den Browser-Cache “vorzuladen”, typischerweise für Bildwechseleffekte wie Rollover. Es hat seinen Ursprung in Netscape 3, das eine sehr begrenzte Auswahl an Mechanismen für die dynamische Dokumentmanipulation bereitstellte (Bildumschaltung, Formularelementmanipulation und Formularübermittlung und Aktualisierung des Statusleistentextes, soweit ich mich erinnere).

    – Tim unten

    5. Juni 2011 um 11:29 Uhr


  • Was ist also “besser” zum Laden, Zwischenspeichern und Bearbeiten von Bildern, bevor sie angezeigt werden?

    – Billbad

    18. Februar 2012 um 1:48 Uhr

  • Dies ist eine ziemlich gute Antwort, ebenso wie einige der anderen unten, aber sie scheinen alle unvollständig zu sein. Zusammengenommen denke ich, dass die wahren Unterschiede aufgedeckt werden könnten, indem man jedes Objekt erstellt, 1) einen rekursiven Speicherauszug aller Eigenschaften und Methoden durchführt, um sie zu vergleichen, 2) Netzwerkprotokolle zu beobachten, um zu überprüfen, ob das Caching-Verhalten gleich ist, und 3) Testen Sie die Ereignisweitergabe, da eine Antwort darauf hindeutete, dass es möglicherweise keine (oder nicht korrekte) Ereignisweitergabe an Image gibt. Dies ist wahrscheinlich das Ergebnis einer nicht standardisierten Funktion wie Image. 4) Eine Antwort stellt einen Fall dar, in dem ein Bild vielleicht erwünscht ist, aber es vielleicht ein Codegeruch ist.

    Benutzer2895783

    25. März 2019 um 11:59 Uhr

Benutzer-Avatar
Doppelt

Anforderungen:

In meinem Team bauen wir eine Winkel-5-Anwendung. Die Feature-Anforderung bestand darin, Bilder beim Komponentenladen vorab zu laden, um sie wiederzuverwenden, ohne sie bei Bedarf an einer bestimmten Stelle in unserer Single-Page-Anwendung erneut zu laden.

1. img = neues Bild (); Weg:

Wir haben versucht, Bilder in DOM vorab zu laden create new Image()
aber als wir die URL der Bildquelle wiederverwendeten, wurde der Browser immer neu geladen die Quelldatei oder überprüft, ob der Header geändert wurde (wenn Cache aktiviert ist), was bedeutet, dass das Vorladen erfolgreich war, aber für jede Wiederverwendung wurde der Roundtrip zum Server erneut durchgeführt.

2. img = document.createElement(‘img’) Weg:

Als wir das gleiche mit taten document.createElement('img')
die Bildquelle war nicht neu geladensondern wiederverwendet aus dem lokalen Speicher des Dokuments und Es wurde keine zusätzliche Anfrage gestellt für die URL img src.

Ich verstehe nicht wirklich warum, aber das ist ein großer Unterschied, den wir entdeckt haben. Falls jemand anderes die vorinstallierten Bilder wiederverwenden muss, wäre das spätere der Weg, um etwas Bandbreite und wenige angeforderte Roundtrips zu sparen 🙂

  • Ja, ich sehe definitiv einige große Unterschiede zwischen den beiden, wenn ich sie mit Webkomponenten verwende. Relevante Frage.

    Benutzer993683

    15. September 2018 um 15:29 Uhr

Benutzer-Avatar
Duri

Die beiden Zeilen sind äquivalent und beide erstellen ein HTMLImageElement-Objekt. Der einzige Unterschied besteht im XML-Dokument mit gemischten Namespaces – new Image() kehrt immer zurück <img> Element mit XHTML-Namensraum, document.createElement('img') tut dies nicht immer.

  • Vielen Dank! Können Sie näher erläutern, warum document.createElement('img') tut das nicht immer (hängt es vom doctype des Dokuments ab)?

    – Iswanto Arif

    5. Juni 2011 um 8:54 Uhr

  • In Bezug auf den Namensraum: Das ist was document.createElementNS ist für: developer.mozilla.org/en/DOM/document.createElementNS

    – Felix Klinge

    5. Juni 2011 um 8:58 Uhr

Ich persönlich würde bei createElement bleiben, weil es dann kein Sonderfall ist, ein Bild zu erstellen, alles wird auf die gleiche Weise erstellt, da sie identisch sind das und die beiden Methoden in Ihren Fragen, aber jquery funktioniert browserübergreifend

Ich weiß nicht, was der technische Unterschied sein soll, aber ich habe gerade den Fehler im IE8 behoben, indem ich ihn geändert habe new Image() zu document.createElement('img') im folgenden Code. In IE8 wurde der Onload-Callback bei Verwendung von nie ausgelöst Image Konstrukteur.

newImage = document.createElement('img');
//newImage = new Image();

newImage.onload = function () {
  callback(this.width, this.height);
};

newImage.src = image.src;

Es gibt einige signifikante Unterschiede zwischen diesen beiden Methoden zum Erstellen von Bildern, wenn Sie mit Webkomponenten arbeiten. Wenn Sie zum Beispiel die verwenden document.createElement Ansatz innerhalb eines importierten HTML-Dokuments (mithilfe von <link rel="import" href="https://stackoverflow.com/questions/6241716/...">), dann Das Bild wird erst dann tatsächlich geladen, wenn es an das DOM des Hauptdokuments angehängt wurde. Siehe diese SO-Frage/Antwort für weitere Details.

1092900cookie-checkGibt es einen Unterschied zwischen `new Image()` und `document.createElement(‘img’)`?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy