I use new Image() to create a new image element. When I set the 'src' attribute, a network request will be triggered at once. Why? Is there any documentation that explains it?

The following cases:

Case 1:

var img = new Image();
img.src = '';

Case 2:

var imgStr = '<img src="">';
var div = document.createElement('div');
div.innerHTML = imgStr;

Case 3:

var script = document.createElement('script');
script.src = '';
// document.body.appendChild(script);

In case1 and case2, a network request will be triggered at once.

In case3, if I don't append the script element to the body, no network request will be triggered.

Why?

I use new Image() to create a new image element. When I set the 'src' attribute, a network request will be triggered at once. Why? Is there any documentation that explains it?

The following cases:

Case 1:

var img = new Image();
img.src = 'http://someurl.png';

Case 2:

var imgStr = '<img src="http://someurl.png">';
var div = document.createElement('div');
div.innerHTML = imgStr;

Case 3:

var script = document.createElement('script');
script.src = 'http://someurl.js';
// document.body.appendChild(script);

In case1 and case2, a network request will be triggered at once.

In case3, if I don't append the script element to the body, no network request will be triggered.

Why?

• javascript
• html

1 Answer 1

I'm not sure this will help, step 24 in preparing script, explains the script tag's src behavior, which the user agent(browser) has to follow:

For performance reasons, user agents may start fetching the classic script or module graph (as defined above) as soon as the src attribute is set, instead, in the hope that the element will be inserted into the document (and that the cross-origin attribute won't change the value in the meantime).

Either way, once the element is inserted into the document, the load must have started as described in this step. If the UA performs such prefetching, but the element is never inserted in the document or the src attribute is dynamically changed, or the crossorigin attribute is dynamically changed, then the user agent will not execute the script so obtained, and the fetching process will have been effectively wasted.

This explains how and when the image resource needs to be load even though the image element isn't in the DOM:

A user agent that obtains images immediately must synchronously update the image data of an img element, with the restart animation flag set if so stated, whenever that element is created or has experienced relevant mutations.

A user agent that obtains images on demand must update the image data of an img element whenever it needs the image data (i.e., on demand), but only if the img element's current request's state is unavailable. When an img element has experienced relevant mutations, if the user agent only obtains images on demand, the img element's current request's state must return to unavailable.

Further on img element's DOM manipulation:

The relevant mutations for an img element are as follows:

• The element's src, srcset, width, or sizes attributes are set, changed, or removed.

• The element's src attribute is set to the same value as the previous value. This must set the restart animation flag for the update the image data algorithm.

• The element's crossorigin attribute's state is changed.

• The element is inserted into or removed from a picture parent element.

• The element's parent is a picture element and a source element is inserted as a previous sibling.

• The element's parent is a picture element and a source element that was a previous sibling is removed.

• The element's parent is a picture element and a source element that is a previous sibling has its srcset, sizes, media, or type attributes set, changed, or removed.

• The element's adopting steps are run.