31

I want to load CSS files on demand (by eg. running an XML HTTP request which returns the CSS files to be loaded) for example style1.css, style2.css ..

So is there a way in jQuery (or a plugin) to this?

  • bulk-loading several files + adding all those CSS-files into the dom
  • when finished loading: firing a callback (like alerting "all stylesheets are finished loaded!");

the idea is: loading html via xmlhttp, loading +adding required css-files, then - after anything is finished, display that html.

any idea?

Thanx!

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Fuxi
  • 7,611
  • 25
  • 93
  • 139

8 Answers8

24

How to load multiple CSS files with callback as requested
Note: ithout xdomain permissions, $.get will only load local files

WORKING DEMO
Note that the text "all css loaded" appears after loading but before the CSS is applied. Perhaps another workaround is required to overcome that.

$.extend({
    getManyCss: function(urls, callback, nocache){
        if (typeof nocache=='undefined') nocache=false; // default don't refresh
        $.when.apply($,
            $.map(urls, function(url){
                if (nocache) url += '?_ts=' + new Date().getTime(); // refresh? 
                return $.get(url, function(){                    
                    $('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');                    
                });
            })
        ).then(function(){
            if (typeof callback=='function') callback();
        });
    },
});

Usage

var cssfiles=['https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'];

$.getManyCss(cssfiles, function(){
    // do something, e.g.
    console.log('all css loaded');
});

to force refresh the css files add true 

$.getManyCss(cssfiles, function(){
    // do something, e.g.
    console.log('all css loaded');
}, true);
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • 3
    +1. For everybody else that wonders: The solution does not fire a callback when the css is loaded (as demanded in the question). But since the resource is fetched beforehand, the callback that fires after $.get() resolves will fire immediately, as the resource is in the browsers cache. Nice solution indeed, should be the accepted answer. – Dynalon Mar 07 '14 at 19:18
  • The resources load and as soon as they load they are appended to the page. When all are loaded the callback fires. I will test whether the callback executes before the link is added to head. – Popnoodles Mar 09 '14 at 20:52
  • @Dyna You're right, it triggers after all $.get()s resolve but before it takes effect. I don't like the solution but I might be tempted to use setInterval to see when the last `` is added. A simple fix would be `if (typeof callback=='function') setTimeout(callback, 500);` A delay of 0 which works for some problems wasn't adequate. There must be a cleaner way.... – Popnoodles Mar 09 '14 at 21:03
  • 1
    Please note that this does not ensure that the style-sheets will be appended in the given order. To perform that, you'll have to loop through the style-sheets and append them to the `head` as `` inside the `then` part of the `when`. – rolebi Jun 04 '14 at 12:20
  • @rolebi perhaps that would use a recursive function – Popnoodles Jun 04 '14 at 14:40
  • @Popnoodles That was just an example, was waiting for an update of your answer actually :p – rolebi Jun 05 '14 at 17:53
  • @Popnoodles can you help me to find the solution for out this Q [Question LINK___](http://stackoverflow.com/questions/41450997/jquery-load-function-not-work-proper-way-when-i-am-using-multi) – MD Ashik Jan 04 '17 at 08:45
  • I expanded on this answer. The one I just provided doesn't call the resource twice. – Erutan409 Oct 27 '17 at 23:12
  • @Popnoodles I edited your post as you had an incorrect function name in the "Usage" section, it said `getManyCss()` rather than `getCss()`. Hope that was OK? – SaschaM78 May 13 '19 at 13:16
  • @SaschaM78 No it was supposed to be getManyCss because that's what it does. – Popnoodles Jun 20 '19 at 12:58
  • @Popnoodles then please update the fiddle as it still uses `getCss()` rather than `getManyCss()`. – SaschaM78 Jun 20 '19 at 13:03
  • Updated, and taking @Alberto's mods into account. Thanks – Popnoodles Jul 03 '19 at 12:52
9

The answer given by @Popnoodles is not correct because the callback is not executed after all items have been loaded, but rather when the $.each loop is finished. The reason is, that $.each operation does not return a Deferred object (which is expected by $.when).

Here is a corrected example:

$.extend({
    getCss: function(urls, callback, nocache){
        if (typeof nocache=='undefined') nocache=false; // default don't refresh
        $.when.apply($,
            $.map(urls, function(url){
                if (nocache) url += '?_ts=' + new Date().getTime(); // refresh? 
                return $.get(url, function(){                    
                    $('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');                    
                });
            })
        ).then(function(){
            if (typeof callback=='function') callback();
        });
    }
});
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Alberto
  • 113
  • 1
  • 6
  • Yep, it works. Although you'll have to switch `i` and `url` around in `function(i, url)` for it to really work. – spaceman Oct 27 '14 at 16:28
  • Yes, this works perfectly. Like @Alberto said, $.each doesn't return a Deferred object which is required for $.when. So, when using $.map, it works like a charm. – Balasubramani M Apr 30 '18 at 06:31
8

Here is how I would load it:

$(document).ready( function() {
    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "path/to/file/style.css"
    });
    $("head").append(css);
});
Whit
  • 1,149
  • 1
  • 12
  • 28
  • thx looks great but i need to load those css-files on demand after jQuery has already been loaded .. :/ – Fuxi Aug 17 '10 at 01:30
  • 5
    Right, the $(document).ready event will fire after jQuery has already been loaded. – Whit Aug 17 '10 at 01:33
  • He probably means a click or some other action, $(document).ready() isn't really **on-demand** :) He should've specified however. – Marko Aug 17 '10 at 01:52
  • @Fuxi - so then just change `$(document).ready(...)` to whatever event you want to trigger it, e.g.: `$('selector').click(...)`. – Matt Huggins Aug 17 '10 at 15:09
  • 5
    This only answers half of the OP's question: the other half is 'firing a callback when finished loading'. Unfortunately adding .load(function(){}) to the created link doesn't cut the mustard... – Tom Auger Dec 01 '11 at 20:53
  • 6
    -1 to the answer as it only covers half of the problem, which is the easy one. The hard thing is the callback after the css resource has loaded – Dynalon Dec 03 '13 at 16:45
  • 1
    @Dyna it's not hard at all – Popnoodles Jan 27 '14 at 13:46
  • @Popnoodles I am very interested in your solution to that problem, mind sharing it? – Dynalon Jan 27 '14 at 17:54
2

The solution can be improved a bit I think... First of all, when you use this lines of code:

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

You're really making 2 calls to retrieve the css: first in the $.get itself and a second time when you append the <link> into the head. Removing the $.get will also retrieve the css, but just once:

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

But if you need to do more things (eg. loading a script file) while retrieving these css' before calling the callback function I think a better approach for this would be using promises instead of the when...then solution. You could do something like this:

var requests = []; //array which will contain every request we want to do before calling the callback function

$.map(urls, function(url) { //urls is the array of css files we want to load
    var defer = $.Deferred();
    defer.promise();

    //we add the deferred object to the requests array
    requests.push(defer);

    var cssEl = $('<link>', { rel: 'stylesheet', type: 'text/css', 'href': url });
    cssEl.appendTo('head').on("load", function() {
        defer.resolve();
    });
});

var anotherRequest = $.ajax({...}); //eg. a script file
requests.push(anotherRequest);

$.when.apply($, requests).done(function() {
    // callback when all requests are done
});

This way, if some of the css takes some time to load, the callback function won't be executed until all of them are retrieved.

kikus
  • 31
  • 3
1

THIS DOES NOT REQUIRE THE CSS FILE(S) TO BE LOADED MORE THAN ONCE

Working off from the other established answers, I managed to come up with this, which seems to work similar to jQuery.getScript():

(function($){

    $.extend({
        getCss: function(url, success) {

            if ($("head").children("style[data-url='"+url+"']").length) {
                console.warn("CSS file already loaded: "+url);
            }

            var deferred = $.Deferred(function(defer){
                $.ajax({
                    url: url
                    ,context: {defer:defer,url:url}
                    ,dataType: 'text'
                    ,cache: (function(){
                        var cache = $.ajaxSetup().cache;
                        if (cache === undefined) {cache = false;}
                        return cache;
                    })()
                })
                .then(
                    function(css, textStatus, jqXHR){
                        css = "\n\n/* CSS dynamically loaded by jQuery */\n\n"+css;
                        $('<style type="text/css" data-url="'+this.url+'">'+css+'</style>').appendTo("head");
                        this.defer.resolve(css, textStatus, jqXHR);
                    }
                    ,function(jqXHR, textStatus, errorThrown){
                        this.defer.reject(jqXHR, textStatus, errorThrown);
                    }
                );
            });
            if ($.isFunction(success)) {deferred.done(success);}
            return deferred;
        }
    });

})(jQuery);

It doesn't load the requested file more than once, which DOES require that the CSS content is statically stored in the head. But, it makes sense considering that loading/evaluating JavaScript is different than how styling is accessible to the browser for rendering.

$.getCss('path/to/css/file.css')
.done(function(){
    console.log("Worked");
 })
.fail(function(){
    console.log("Failed");
});

So far I've tested it with Chrome, IE, and Firefox. All seem to work fine.

Erutan409
  • 730
  • 10
  • 21
1

You are trying to achieve lazy loading of your resources. There are different plug ins to handle this kind of behavior.

I've can name this two:

Two snippets from the plugins page to show it's use:

Jquery Plugins

$.plugins({ path: '/scripts/', plugins: [        
    { id:'box', js:'box.js', css:'box/styles.css', sel:'a[rel*=box]', ext:'box', fn:'box' },        
]});

jQuery(document).ready(function($){
  $('a').box();
});

Lazy with dependencies:

$.lazy('ui.draggable.js','draggable',{
'css':['modal.css','drag.css'],
'js':['ui.core.js']
});

// And then you use you plugins as you always do
$("#draggable").draggable();
goliatone
  • 2,183
  • 16
  • 29
0

If you want it to by dynamic (read: on demand) you can modify Whit's response to loadCssFile() and call that with the file you want to load.

function loadCssFile(pathToFile) {
    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: pathToFile
    });
    $("head").append(css);
}
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Robert
  • 21,110
  • 9
  • 55
  • 65
0

If you want to load multiple CSS files, but want them to be loaded one by one, you can use solution below:

var getCss = function (url, callback) {
        $.get(url, function () {
            $('<link>', {rel: 'stylesheet', type: 'text/css', 'href': url}).appendTo('head');
            if (typeof callback == 'function') callback();
        });
    };

Define function above, then define array containing you wanted css files

var cssfiles = ['css/pic1.css', 'css/pic2.css',
    'css/pic3.css', 'css/pic4.css', 'css/pic5.css',
    'css/pic6.css', 'css/pic7.css', 'css/pic8.css',
    'css/pic9.css'];

Then define callback function that will call each css files in the array

var callback = function (index) {
    getCss(cssfiles[index], function () {
        if (index + 1 < cssfiles.length) {
            callback(index + 1);
        }
    });
};

then start function with first css file by giving its index

callback(0);
Berk Can
  • 21
  • 1