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

Question

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

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

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

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

Answer 1

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

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

Уровень DOM 2 - это официальный стандарт, разработанный W3C.

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

---

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

Да.

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

Спецификация ECMAScript мотивирует хост-объекты следующим образом:

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

и

хост-объект
объект, предоставленный хост-средой для завершения среды выполнения ECMAScript.
ПРИМЕЧАНИЕ Любой объектэто не собственный объект хоста.

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

Answer 2

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

Answer 3

Требования:

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

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

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

2. img = document.createElement ('img') путь:

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

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

Answer 4

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

Answer 5

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

Answer 6

Я не знаю, какое должно быть техническое отличие, но я просто исправил ошибку в IE8, изменив значение с new Image() на 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;