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?
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);
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);
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' />");