46 votes

Puis-je charger des feuilles de style externes sur demande?

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

.. comme le code ci-dessus qui charge un JS externe sur demande, y a-t-il quelque chose de similaire disponible pour charger une feuille de style CSS externe si nécessaire?

Comme par exemple lorsque j'utilise des Lightboxes (popups en ligne) sur mon site, je souhaite éviter de charger des fichiers Lightbox JS et CSS en cours de chargement, à moins que l'utilisateur ne le demande.

Merci

67voto

Paul D. Waite Points 35456

Yup: si vous créez un <link> balise de lien vers une feuille de style et l'ajouter à l' <head> balise, le navigateur va charger que de la feuille de style.

E. g.

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

Cependant, comme par @peteorpeter les commentaires, cela ne fonctionne pas dans IE 8 ou sous - là, vous devez:

  1. ajouter l' <link> avant l'établissement de ses href; ou
  2. l'utilisation d'IE document.createStyleSheet() méthode

En outre, vérifier si un lien a déjà été ajoutée ne fonctionne pas de manière fiable, sur tous les navigateurs.

Je voudrais également question une partie de votre site:

Je veux éviter le chargement de lightbox JS et CSS fichiers onload, sauf si requis par l'utilisateur.

Pourquoi? Pour réduire le poids de la page? Je peux comprendre le désir, mais vous devez mesurer la taille de votre les fichiers CSS et JS (après minification et gzipping) avec la lightbox, le code n', et sans, pour voir si la réduction est en vaut la peine:

  1. la complexité supplémentaire de chargement à la demande; et
  2. la légère diminution de la réactivité de la boite à idées (parce que lors du chargement à la demande, la lightbox faudra attendre sa propre feuille de style CSS et JS à charger avant de pouvoir faire sa chose)

Après la minification et gzipping, il pourrait bien ne pas être beaucoup de différence.

Et garder à l'esprit que vous pouvez demander au navigateur de la mémoire cache de CSS et de JS pour un long temps, en signifiant que c'est téléchargé lorsqu'un utilisateur visite votre site avec un cache vide.

28voto

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

11voto

Reigel Points 34008

Vous pourriez faire:

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

4voto

zombat Points 46702

Vous pouvez ajouter des références à des feuilles de style externes en ajoutant simplement du contenu HTML dynamique dans l'en-tête:

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

Ce contenu est inséré dans le DOM, puis restitué normalement, ce qui provoque l'extraction d'une feuille de style externe.

Faites également attention à la réponse de cletus. Toutefois, si vous ne faites pas attention au chargement dynamique de contenu statique, cela peut vous coûter cher en temps de chargement de page et en transfert de ressources excessif.

2voto

cletus Points 276888

Généralement, vous êtes mieux de simplement y compris tout ce que vous devez en supposant que vous êtes le faire correctement.

Je veux dire par là que les meilleures pratiques pour le contenu statique (images, Javascript, CSS) est de:

  • minimiser externe des requêtes HTTP (minimiser le nombre de fichiers);
  • version les fichiers et l'utilisation d'un extrême à terme d'en-tête Expires;
  • minifier et compresser le contenu approprié.

ainsi, un utilisateur ne jamais télécharger un fichier en une fois jusqu'à ce qu'elle change.

Le chargement dynamique de CSS et de Javascript, sauf si elle est exceptionnellement grand, est généralement injustifiée et contre-productif.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X