Какой лучший способ добавить изображение на страницу с помощью конструктора Image () или document.createElement () [duplicate]

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

Требования:

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

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

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

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

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

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

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

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