jQuery: Load CSS with AJAX (all browsers)

There is a Mobile Optimized version of this page (AMP). Open Mobile Version.

I was recently looking for a solution for loading style sheets dynamically into a web page, but I was also after knowing when the style sheet was loaded so I could stop showing my custom loading bar.

I decided the best way to do this was to load the file with jQuery Ajax, which would give me the “success” call-back and allow me to pick up on failures and etc.

This is the code I originally implemented:

<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url:"style.css",
			dataType:"script",
			success:function(data){
				 $("<style></style>").appendTo("head").html(data);
				 //loading complete code here
			}
		});
	});
</script>

However the above code will not work in IE6 – IE7 –IE8 – Safari and probably more browsers, which is definitely NO GOOD! Especially when it does not work in the latest Safari!

I managed to find a work around, which in my opinion does EXACTLY THE SAME THING, but what makes all the browsers happy, makes me happy:

<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url:"style.css",
			dataType:"script",
			success:function(data){
				$("head").append("<style>" + data + "</style>");
				//loading complete code here
			}
		});
	});
</script>

This works in all the following browsers I have tested it in:

  • Internet Explorer 6, 7, 8, 9
  • Safari (latest)
  • Google Chrome (latest)
  • Firefox (latest)
  • Opera (latest)

Please drop a comment if this helped you or if you have found a browser it is not compatible with.

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

Post Tags:
, , , , , , ,
  • Jerome

    Hi Deano
    i just found your website and this jquery is, i think, exactly what i'm looking for 😛 … but have you got an online demo, this will be very useful for me (to be honest, i'm not sure to know how i can implement this on my xwiki pages using jquery 😳 ).
    Thanks you!
    regards
    Jerome

  • Hi, I want to call a css file using a custom code module for joomla, am i going to use this code as the link?

  • Tony

    Hi Deano,

    Just wanted to say this is a very elegant solution. Found your code after a little google-fu and love it. Bookmarked, thank you.

  • Aslam Shareef

    Nice. But you could also create a tag in you primary page as :
    <style id="csscontainer" > </style>

    and then
    $(document).ready(function(){
    $("#csscontainer").load("http://yoursite.com/site.css");
    });

  • Jonatan

    The difference with the two examples is that "$("").appendTo("head").html(data);" adds the data to the style tag after it has been added to the DOM. I would guess that "$("").html(data).appendTo("head");" would work better.

  • Nathan

    That sort of worked. An important modification I did to make it work is "DON'T INCLUDE THE DATATYPE" attribute.

  • I dont think there would be any difference? This does the same thing as far as I understand, do you have anything to confirm this is better?