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

Ответ 1

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

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

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

Дополнительные сведения о уровнях DOM см. в quirksmode.org - Уровень 0 DOM и Wikipedia.

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

Да.

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

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

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

и

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

Я не знаю, какова техническая разница, но я просто исправил ошибку 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;

Ответ 5

Требования:

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

1. img = new Image(); путь:

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

2. img = document.createElement('img') способ:

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

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