$.getScript, but for stylesheets in jQuery?

Question

Is there a $.getScript equivalent in jQuery, but for loading stylesheets?

Answer 1

I have created an alternative to $.getScript that handles stylesheets. I called it $.getStylesheet for obvious reasons.

It implements the $.Deferred object, which means you can chain things like so:

$.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
  console.log('the css and js loaded successfully and are both ready');
}, function () {
  console.log('an error occurred somewhere');
});

Here is the little function for $.getStylesheet. It is just hosted on Github gist, so I can update it if I need to.

Answer 2

you can use same method $.getScript to "download" style sheet, since $.getScript actually is just another HTTP request. but it will be a bit wired since css is not executable.

Answer 3

CSS is not a script, so you dont have to "execute" it in the sense of script execution.

Basically a <link> tag created on the fly and appended to the header should suffice, like

$('<link/>', {
   rel: 'stylesheet',
   type: 'text/css',
   href: 'path_to_the.css'
}).appendTo('head');

or

var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';

if you want to do it without jQuery.

The browser will respond to the change in the DOM and update your page layout accordingly.

---

EDIT:

I have read that old Internet Explorer has trouble with this, and you might need to do it like in answer to make it work:

https://stackoverflow.com/a/2685639/618206

---

EDIT2:

Reading the file content and putting it inline (between <style> tags) is also a valid solution, but that way the CSS will not be cached by the browser.

Answer 4

Here is a function that will load CSS files with a success or failure callback. I think this approach is better than the accepted answer because inserting a element into the DOM with an HREF causes an additional browser request (albeit, the request will likely come from cache, depending on response headers).

function loadCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            return $.get(url, function(css) {
                $("<style>" + css + "</style>").appendTo("head");
            });
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}

Usage as so:

loadCssFiles(["https://test.com/style1.css", "https://test.com/style2.css",],
    function() {
    alert("All resources loaded");
}, function() {
    alert("One or more resources failed to load");
});

Here is another function that will load both CSS and javascript files:

function loadJavascriptAndCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            if(url.endsWith(".css")) {
                return $.get(url, function(css) {
                    $("<style>" + css + "</style>").appendTo("head");
                });
            } else {
                return $.getScript(url);
            }
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}