How to asynchronously load CSS using jQuery?

Question

I want to use jQuery to asynchronously load CSS for a document.

I found this sample, but this doesn't seem to work in IE:

<script type="text/javascript" src="/inc/body/jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('<link>', {
            rel: 'stylesheet',
            type: 'text/css',
            href: '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'
        }).appendTo('head');
        $.getScript("/inc/body/jquery/js/jquery-ui-1.8.10.custom.min.js", function(){
        });
    });
</script>

Basically I want to load jQuery UI after the all other data, images, styles, etc load to the page.

The $.getScript works great for JS file. Only problem is with CSS in IE.

Do you know a better solution?

Does it work if you make it $('<link/>'...? I.e. add a forward slash. — lonesomeday
– lonesomeday, Commented Mar 3, 2011 at 21:20
I'm not sure what you mean by asynchronous...do you perhaps mean dynamic? — Peter Olson
– Peter Olson, Commented Mar 3, 2011 at 21:27

Dmitry Pashkevich · Accepted Answer · 2015-09-16 16:51:57Z

45

Here's a method for asynchronous stylesheet loading that doesn't block page render that worked for me:

https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js

Reduced example of the code linked above, based on lonesomeday's answer

var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);

answered Sep 16, 2015 at 16:51

Dmitry Pashkevich

13.6k10 gold badges59 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

stefan Over a year ago

!!This works best for me (considering pageSpeed insights)

Yvan Over a year ago

Another option is to set rel=preload, don't touch the media, then in onload you set rel=stylesheet. But the main idea is great :-)

oligofren Sep 7 at 9:15

Is this the way to go in 2025 or has this been incorporated into the Web standard through some API?

Yvan Sep 8 at 11:22

Seems to be still open for discussion: scottjehl.com/posts/async-css-already (which links to github.com/whatwg/html/issues/3983#issuecomment-2581298073)

Mark Coleman · Accepted Answer · 2011-03-03 21:30:34Z

30

The safe way is the old way...

var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);

edited Mar 3, 2011 at 21:30

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

answered Mar 3, 2011 at 21:27

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

6 Comments

Adam Lukaszczyk Over a year ago

Thanks, but I'd rather prefer to do this in jQuery.

Tom Auger Over a year ago

Why is this preferable to jQuery? You mention this is the "safe" way. What makes it safer than the accepted answer (assuming of course that jQuery is present)?

Hendy Irawan Over a year ago

RequireJS.org docs specifically refer to this approach: requirejs.org/docs/faq-advanced.html#css

Cloudscape Germany Over a year ago

As a rule of thumb: Pure JS is always better, but I don't see how this solution solves the issue of not knowing when the CSS file has finished loading.

Abhishek Goel Over a year ago

Let me tell you why this approach is more efficient than jQuery... Its because if you load it via jQuery, you will have to wait until jQuery is loaded but with this approach you won't need to wait for jQuery and you can load jQuery, CSS and other scripts in parallel

|

Peter Olson · Accepted Answer · 2011-03-03 21:25:34Z

19

This should work in IE:

$("head").append("<link rel='stylesheet' type='text/css' href='/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css' />");

answered Mar 3, 2011 at 21:25

Peter Olson

144k49 gold badges209 silver badges249 bronze badges

7 Comments

Zenexer Over a year ago

The reverse should work, as well: $('<link .../>').appendTo($('head')). This would allow you to chain the link element, rather than the head element, if you wanted to do something else with it after appending it to <head>.

ElHaix Over a year ago

According to this (stackoverflow.com/questions/5085228/…), append does NOT behave asynchronously.

Peter Olson Over a year ago

@ElHaix That's true, but I think the OP misunderstood the word "asynchronously" and really meant "dynamically".

ElHaix Over a year ago

@PeterOlson - Looking at yterium.net/jQl-an-asynchronous-jQuery-Loader - could you actually load up your CSS asynch?

Adam Grant Over a year ago

Right, this is not asynchronous.

|

Hendy Irawan · Accepted Answer · 2012-08-20 11:33:30Z

As mentioned in RequireJS docs, the tricky part lies not in loading the CSS:

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

but in knowing when/whether the CSS has loaded successfully, as in your use case " I want to load jQuery UI after the all other data, images, styles, etc load".

Ideally RequireJS could load CSS files as dependencies. However, there are issues knowing when a CSS file has been loaded, particularly in Gecko/Firefox when the file is loaded from another domain. Some history can be found in this Dojo ticket.

Knowing when the file is loaded is important because you may only want to grab the dimensions of a DOM element once the style sheet has loaded.

Some people have implemented an approach where they look for a well known style to be applied to a specific HTML element to know if a style sheet is loaded. Due to the specificity of that solution, it is not something that would fit will with RequireJS. Knowing when the link element has loaded the referenced file would be the most robust solution.

Since knowing when the file has loaded is not reliable, it does not make sense to explicitly support CSS files in RequireJS loading, since it will lead to bug reports due to browser behavior.

Community · Accepted Answer · 2017-05-23 11:54:22Z

1

As per Dynamically loading css stylesheet doesn't work on IE:

You need to set the href attr last and only after the link elem is appended to the head.

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Aug 15, 2013 at 7:41

ekerner

5,8601 gold badge39 silver badges31 bronze badges

Comments

noamtcohen · Accepted Answer · 2014-08-14 11:49:58Z

0

$.get("path.to.css",function(data){
    $("head").append("<style>"+data+"</style>");
});

answered Aug 14, 2014 at 11:49

noamtcohen

4,6202 gold badges22 silver badges14 bronze badges

2 Comments

Dzhuneyt Over a year ago

Caution: this may not work if your css file is hosted crossdomain (Browser restrictions).

Stavm Over a year ago

^ this is true for every http request

Alan H. · Accepted Answer · 2014-12-08 20:40:07Z

0

None of the solutions here actually load the CSS file without blocking page render - which is typically what is meant by “asynchronously.” (If the browser is waiting for something and preventing the user from interacting with the page, the situation is by definition synchronous.)

Examples of synchronous and asynchronous loading can be found here:

http://ajh.us/async-css

I have found that using a setTimeout to defer loading seems to help.

answered Dec 8, 2014 at 20:40

Alan H.

16.7k17 gold badges85 silver badges116 bronze badges

1 Comment

oligofren Sep 7 at 9:15

Not true. Dmitry Pashkevich's solution does not block.

Yvan · Accepted Answer · 2023-09-15 06:49:22Z

0

Another option with very little inline Javascript:

<link
    rel="preload"
    href="/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css"
    as="style"
    onload="this.onload = null; this.rel = 'stylesheet';"/>

Browser will load the file without blocking, then on load it will switch it to the correct rel=stylesheet, which will interpret the CSS file.

answered Sep 15, 2023 at 6:49

Yvan

2,72928 silver badges31 bronze badges

Comments

Praveen Prasad · Accepted Answer · 2011-03-03 21:28:06Z

-1

jQuery(function(){

jQuery('head').append('<link href="/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />')

});

answered Mar 3, 2011 at 21:28

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to asynchronously load CSS using jQuery?

9 Answers 9

4 Comments

6 Comments

7 Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

6 Comments

7 Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related