jquery - plantillas - plantilla divi wordpress gratis

¿Puedo cargar hojas de estilo externas bajo pedido? (7)

$.getScript(''ajax/test.js'', function() { alert(''Load was performed.''); });

.. como el código anterior que carga un JS externo bajo pedido, ¿hay algo similar disponible para cargar una hoja de estilo CSS externa cuando sea necesario?

Como, por ejemplo, cuando uso lightboxes (ventanas emergentes en línea) en mi sitio, quiero evitar cargar carga en los archivos lightbox JS y CSS, a menos que así lo solicite el usuario.

Gracias

En general, es mejor que simplemente incluyas todo lo que necesites suponiendo que lo estás haciendo correctamente.

Con eso me refiero a que la mejor práctica para el contenido estático (imágenes, Javascript, CSS) es:

minimizar las solicitudes HTTP externas (minimizar el n. ° de archivos);
versione los archivos y use un encabezado Expires de futuros lejanos;
minimizar y comprimir el contenido según corresponda.

por lo que un usuario solo descargará un archivo determinado una vez hasta que cambie.

Cargar dinámicamente CSS y Javascript, a menos que sea excepcionalmente grande, suele ser injustificado y contraproducente.

Podemos agregarlo directamente por

$("head").append($("<link rel=''stylesheet'' href=''style.css'' type=''text/css'' media=''screen'' />"));

Podrías hacerlo:

$(''<link>'').attr(''rel'',''stylesheet'') .attr(''type'',''text/css'') .attr(''href'',''link_to.css'') .appendTo(''head'');

Problemas de IE ...

Estaba fallando IE 6,7,8 con

$(''head'').append( $(''<link rel="stylesheet" type="text/css" />'').attr(''href'', ''assets/css/jquery.fancybox-1.3.4.css'') );

Simplemente los copié en la hoja principal para evitar otra necesidad de http, voila.

Puede agregar referencias a hojas de estilo externas simplemente agregando contenido HTML dinámico en el encabezado:

$(''head'').append(''<link rel="stylesheet" href="style.css" type="text/css" />'');

Este contenido se inserta en el DOM, y posteriormente se procesa normalmente, en este caso provocando una recuperación de una hoja de estilo externa.

Sin embargo, preste atención a la respuesta de Cletus, ya que si no tiene cuidado con la carga dinámica de contenido estático, puede terminar costando tiempo de carga de la página y una excesiva transferencia de recursos.

Sí: si crea una etiqueta <link> vincule con una hoja de estilo y la agregue a la etiqueta <head> , el navegador cargará esa hoja de estilo.

P.ej

$(''head'').append(''<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">'');

Sin embargo , según los comentarios de @ peteorpeter , esto no funciona en IE 8 o menos; allí, necesitas:

añada el <link> antes de configurar su href ; o
utilice el método document.createStyleSheet() IE

Además, comprobar si un enlace ya se ha agregado no funciona de manera confiable en todos los navegadores.

También cuestionaré parte de tu premisa:

Quiero evitar que se carguen los archivos lightbox JS y CSS, a menos que así lo solicite el usuario.

¿Por qué? Para reducir el peso de la página? Puedo entender el deseo, pero debes medir el tamaño de tus archivos CSS y JS (después de la minificación y el gzipping) con el código lightbox allí, y sin, para ver si la reducción vale:

la complejidad añadida de cargar a pedido; y
la capacidad de respuesta ligeramente reducida de la caja de luz (porque cuando se carga a pedido, la caja de luz tendrá que esperar a que su propio CSS y JS carguen antes de poder hacerlo)

Después de la minificación y el gzip, puede que no haya tanta diferencia.

Y tenga en cuenta que puede indicar al navegador que guarde en caché su CSS y JS durante mucho tiempo, lo que significa que solo se descarga cuando un usuario visita su sitio con un caché vacío.

$(''<link/>'', {rel: ''stylesheet'', href: ''myHref''}).appendTo(''head'');