Quiero usar jQuery para cargar CSS de forma asíncrona para un documento.
Encontré esta muestra, pero esto no parece funcionar en 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> Básicamente, quiero cargar jQuery UI después de que todos los demás datos, imágenes, estilos, etc. se carguen en la página.
El $.getScript funciona muy bien para el archivo JS. El único problema es con CSS en IE.
¿Conoces una solución mejor?
Aquí hay un método para la carga asincrónica de hojas de estilo que no bloquea el procesamiento de la página que funcionó para mí:
https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js
Ejemplo reducido del código vinculado anteriormente, basado en la respuesta de lonesomeday
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);La forma segura es la forma antigua...
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);Esto debería funcionar en IE:
$("head").append("<link rel='stylesheet' type='text/css' href='/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css' />");