web-dev-qa-db-fra.com

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 chargement, à moins que l'utilisateur ne le demande.

Merci

jqueryloadrequestexternallightbox
45
3zzy

Yup: si vous créez une balise <link> reliant une feuille de style et l'ajoutez à la balise <head>, le navigateur chargera cette feuille de style.

Par exemple.

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

Cependant, selon les commentaires de @ peteorpeter , cela ne fonctionne pas dans IE 8 ou inférieur - vous devez soit:

  1. ajoute le <link>avant en définissant sa href; ou
  2. utiliser la méthode document.createStyleSheet() de IE

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

Je voudrais aussi remettre en question une partie de votre idée:

Je souhaite éviter de charger des fichiers Lightbox JS et CSS en chargement, à moins que l'utilisateur ne le demande.

Pourquoi? Pour réduire le poids de la page? Je peux comprendre le désir, mais vous devriez mesurer la taille de vos fichiers CSS et JS (après minification et gzipping) avec le code de la visionneuse dedans, et sans, pour voir si la réduction vaut la peine:

  1. la complexité accrue du chargement à la demande; et
  2. la réactivité légèrement réduite de la lightbox (car lors du chargement à la demande, la lightbox devra attendre que ses propres CSS et JS se chargent avant de pouvoir faire son travail)

Après minification et gzipping, il n’ya peut-être pas beaucoup de différence.

Et gardez à l'esprit que vous pouvez demander au navigateur de mettre en cache votre CSS et votre JS pendant une longue période, ce qui signifie qu'il ne sera téléchargé que lorsqu'un utilisateur visite votre site avec un cache vide.

63
Paul D. Waite
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
26
Cody

Vous pourriez faire:

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

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.

4
zombat

Problèmes IE ...

Je me suis écrasé IE 6,7,8 avec

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

Il suffit de les copier dans la feuille principale pour éviter une autre demande HTTP, le tour est joué.

2
user541072

En général, il vaut mieux inclure simplement tout ce dont vous avez besoin en supposant que vous le faites correctement.

J'entends par là que la meilleure pratique pour le contenu statique (images, Javascript, CSS) consiste à:

  • minimiser les requêtes HTTP externes (minimiser le nombre de fichiers);
  • version des fichiers et utiliser un en-tête far futures expires;
  • réduisez et comprimez le contenu comme il convient.

de sorte qu'un utilisateur ne téléchargera jamais un fichier donné jusqu'à ce qu'il change.

Le chargement dynamique de CSS et de Javascript, sauf s’il est exceptionnellement volumineux, est généralement injustifié et contre-productif.

2
cletus

Nous pouvons l’annexer directement par 

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