Question

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.

Answer 1

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.