Images created using `document.currentScript.ownerDocument.createElement` (from within <link> imported HTML) never load

Question

Here\'s a function that returns the width of an image, given the image\'s url:

async function getImageWidthByUrl(imgUrl) {
  const imgEl = document.createEle         


        

Answer 1

It's the normal behaviour.

The image referenced in the src attribute <img> element in an imported document with <link rel="import"> is not loaded until it is appended to the main document.

From the HTML Imports tutorial:

Think of content as inert until you call upon its services. [...]

Unless you append it's content to the DOM, it's a no-op. In fact, the only thing that "executes" in the import document directly is <script>.

You can apend it to the main document with document.apendNode().

Also, note that in your example, you should pass the imported document reference as an argument of the main function of simple-test.html for some reasons explained in this post or that post.

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