CODEWITHSUNDEEP
javascript
gordyr
gordyr

Reputation: 6276

How to detect when multiple stylesheets have been dynamically injected with javascript

I have the following function which dynamically loads in a stylesheet when the corresponding HTML is also injected into the page.

This all works great. The injected html is hidden, then once it's stylesheet has loaded, it is set to visible.

function _addCssFile(filename, fragment) {

                var stylesheet = doc.createElement("link");
                stylesheet.setAttribute("rel", "stylesheet");
                stylesheet.setAttribute("type", "text/css");
                stylesheet.setAttribute("href", filename);
                doc.getElementsByTagName("head")[0].appendChild(stylesheet);

            stylesheet.onload = function(){
                fragment.setAttribute("style", "visibility:visible;");
            }          
}

However there is a possibility of a section of html having more than one css file to be injected so I need to be able to detect when ALL css files in an array have successfully been injected into the DOM.

The above function runs for each and every included css file, how would I go about firing an event once a whole array of stylesheets have been injected? As you can see the injected html will currently be set to visible for the first loaded stylesheet and again for each subsequent file.

Upvotes: 0

Views: 101

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Have a counter. For every CSS file added, increment the counter. For every CSS file loaded, decrement it. If the counter reaches zero after all the CSS files have been added, then they have all loaded.

Upvotes: 3

Related Questions