Изображения, созданные с использованием `document.currentScript.ownerDocument.createElement` (из <link>импортированного HTML), никогда не загружаются

Question

Вот функция, которая возвращает ширину изображения, учитывая его URL:

async function getImageWidthByUrl(imgUrl) {
  const imgEl = document.createElement("img");
  let untilImgLoaded = new Promise((resolve, reject) => {
    imgEl.onload = resolve;
    imgEl.onerror = reject;
  });
  imgEl.src = imgUrl;
  await untilImgLoaded;
  return imgEl.naturalWidth;
}

Работает нормально.Это также (конечно) работает, если мы используем new Image() вместо document.createElement("img").

Однако метод document.createElement("img") не работает, если document ссылается на документобъект <link> импорта html.

Взгляните на этот пример , который импортирует этот HTML .Обратите внимание, что консоль выводит:

"Starting..."
512
512

и никогда не выводит окончательный 512, а затем "Finished.", как это и должно быть (на первый взгляд).Это потому что onload событие imgEl никогда не срабатывает;изображение никогда не загружается, если оно было создано с document.currentScript.ownerDocument.createElement.Я проверял это в Chrome 69.

Это ожидаемое поведение или ошибка?Не должно ли это, по крайней мере, выдать ошибку, если невозможно создать изображение, используя <link> 's document?

Answer 1

Это нормальное поведение.

Изображение, указанное в элементе src attribute <img> в импортированном документе с <link rel="import">, не загружается, пока не будет добавлено к основному документу.

Из учебника HTML Imports :

Думайте о том, что контент инертен, пока вы не обратитесь к его услугам.[...]

Если вы не добавляете его контент в DOM, он не предназначен.Фактически, единственное, что «выполняется» в импортируемом документе напрямую, это <script>.

. Вы можете добавить его к основному документу с помощью document.apendNode().

. Также,обратите внимание, что в вашем примере вы должны передать импортированную ссылку на документ в качестве аргумента основной функции simple-test.html по некоторым причинам, объясненным в этом посте или , чтосообщение .

( function( ownerDocument ) {
    //...
    if( method === "document.currentScript.ownerDocument.createElement") {
        imgEl = ownerDocument.createElement("img")
        var imgOK = document.adoptNode( imgEl )
    }
    //...  
} ) ( document.currentScript.ownerDocument )