Есть ли разница между` new Image () `и ' document.createElement ('img`)'?

Question

Есть ли разница между` new Image () `и ' document.createElement ('img`)'?

в javascript, я могу сделать:

img1 = new Image();

img2 = document.createElement('img');

мой вопрос в том, есть ли разница между этими двумя подходами? Я где-то читал, что Image,Form и Element называется для размещения объектов, это правда? Если да,то какие объекты хоста?

какой подход предпочтительнее?

625 6

javascript dom

6 ответов:

Comments

Ничего не найдено.

Felix Kling · Accepted Answer · 2011-06-05 12:16:01

Я не мог найти никакой подробной ссылки, но на основе комментария в MDC -HTMLImageElement например, кажется, что Image является частью уровня DOM 0, тогда как document.createElement является частью уровня DOM 2.

DOM level 0 был изобретен Netscape и предоставил способ доступа к определенным элементам веб-сайта. В основном все браузеры поддерживают его для обратной совместимости.
Но если честно, я не понимаю почему the Image конструктор существует, потому что, насколько я понял, не было никакой возможности манипуляции документ с уровнем DOM 0. Возможно, он использовался только внутри браузера для создания объектов.

DOM level 2 является официальным стандартом, разработанным W3C.

для получения дополнительной информации об уровнях DOM, посмотрите на at quirksmode.org -Уровень 0 DOM и Википедия.

я где-то читал, что Image,Form и Element называется для размещения объектов, это правда?

да.

если это так, то какие объекты хоста?

The спецификация ECMAScript мотивирует объекты хоста таким образом:

ECMAScript-это объектно-ориентированный язык программирования для выполнения вычисления и управление вычислительными объектами в среде хоста. ECMAScript, как определено здесь, не предназначен для вычислительной самодостаточности; действительно, в этой спецификации нет положений для ввода внешних данных или вывода вычисленных результатов. Вместо этого ожидается, что вычислительная среда программы ECMAScript будет предоставлять не только объекты и другие объекты, описанные в этой спецификации, но и определенные объекты хоста, зависящие от среды, описание и поведение которых выходят за рамки этой спецификации, за исключением указания на то, что они могут предоставлять определенные свойства, к которым можно получить доступ, и определенные функции, которые могут быть вызваны из программы ECMAScript.

и

хост-объекта
объекта, предоставленного принимающей среде, чтобы завершить среды исполнения JavaScript.
Обратите внимание, любой объект, который не является родным хозяин объект.

таким образом, любой объект, который не определен в спецификации и среды-это хост-объекта. Это, например, в браузере (среди прочих): window,document и console.

duri · Accepted Answer · 2011-06-05 11:26:59

эти две строки эквивалентны и оба создают объект HTMLImageElement. Единственное различие заключается в XML-документе со смешанными пространствами имен -new Image() всегда возвращает <img> элемент с пространством имен XHTML,document.createElement('img') не всегда это делает.

mcgrailm · Accepted Answer · 2011-06-05 11:48:47

Я лично придерживался бы createElement, потому что тогда это не особый случай, чтобы сделать изображение все сделано так же, как они идентичны я также заметил, что jquery использует метод appendChild(node) для всего, и я не уверен в разнице между этим и двумя методами в ваших вопросах, но jquery работает кросс-браузер

Danny Tuppeny · Accepted Answer · 2015-08-26 16:19:19

Я не знаю, какая техническая разница должна быть, но я просто исправил ошибку IE8, изменивnew Image() to document.createElement('img') в следующем коде. В IE8 обратный вызов onload никогда не срабатывал при использовании Image конструктор.
newImage = document.createElement('img');
//newImage = new Image();

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

newImage.src = image.src;

Duplich · Accepted Answer · 2018-06-19 17:42:26

требования:

в моей команде мы строим приложение angular 5. Требование к функции состояло в том, чтобы предварительно загрузить изображения при загрузке компонентов, чтобы повторно использовать их без загрузки снова, когда это необходимо в определенном месте в нашем одностраничном приложении.

1. img = новое изображение (); путь:

мы попытались предварительно загрузить изображения в DOM by create new Image() но когда мы повторно использовали изображение src URL, браузер всегда перезагрузка исходный файл или проверено, изменен ли заголовок (если включен кэш), что означает, что предварительная загрузка была успешной, но для каждого повторного использования снова была выполнена обратная связь с сервером.

2. ИМГ = документ.createElement ('img') путь:

когда мы сделали то же самое с document.createElement('img') Источник изображения был не перезагружается, а взяты из локальной памяти документа и никаких дополнительных запросов не было сделано для URL-адреса img src.

Я не действительно понимаю, почему, но это главное отличие, которое мы обнаружили. В случае, если кому-то еще нужно повторно использовать предварительно загруженные изображения, позже будет способ сохранить некоторую полосу пропускания и несколько запросов roundtrips :)

Joe · Accepted Answer · 2018-09-15 18:34:23

есть некоторые существенные различия между этими двумя способами создания изображений при работе с веб-компонентами. Например, если вы используете document.createElement подход из импортированного HTML-документа (с помощью <link rel="import" href="...">), то изображение фактически не загружается, пока оно не будет добавлено в DOM основного документа. Смотрите это так Вопрос/ответ для более подробной информации.