CODEWITHSUNDEEP
javascriptfirefox
nick zoum
nick zoum

Reputation: 7295

Firefox triggers css load event twice

If you add a load event listener on a HTMLLinkElement, the event gets triggered twice in Firefox. (You can see the difference by running the snippet below in Firefox and in Chrome).

var linkCss = document.head.appendChild(document.createElement('link'));
linkCss.setAttribute('rel', 'stylesheet');
linkCss.setAttribute('href', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
linkCss.setAttribute('type', 'text/css');
linkCss.addEventListener('load', function (event) {
    console.log('CSS Loaded');
});

My current firefox version is: 68.0.1 (64 bit)

Is this a bug?

Upvotes: 1

Views: 135

Answers (1)

Nickolay
Nickolay

Reputation: 32063

I couldn't find if the expected behavior is defined in any spec, but note that if you prepare the element before inserting it into the DOM, there's only one load event fired:

var linkCss = document.createElement('link');
linkCss.setAttribute('rel', 'stylesheet');
linkCss.setAttribute('href', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
linkCss.setAttribute('type', 'text/css');
linkCss.addEventListener('load', function (event) {
    console.log('CSS Loaded');
});

document.head.appendChild(linkCss)

If you start by appending the element to DOM, the first load is triggered when you set the "href" attribute, and the second load is triggered when you set the "type" attribute.

Upvotes: 1

Related Questions