48 votes

Nimbuz avatar

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

Demandé el 24 de Janvier, 2010
Quand la question a-t-elle été
18994 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question 
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

comme le code ci-dessus qui charge un JS externe sur demande, existe-t-il quelque chose de similaire disponible pour charger une feuille de style CSS externe lorsque cela est nécessaire ?

Par exemple, lorsque j'utilise des lightboxes (popups en ligne) sur mon site, je veux éviter de charger les fichiers JS et CSS des lightboxes au moment du chargement, sauf si l'utilisateur le demande.

Gracias

Demandé el 24 de Janvier, 2010 par Nimbuz

Réponses

Trop de publicités?

70voto

Paul D. Waite avatar
Paul D. Waite Points 35456

Ouaip : si vous créez un <link> qui fait le lien avec une feuille de style et l'ajoute à 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 moins - dans ce cas, vous devez aussi le faire :

  1. ajouter le <link> avant fixant son href ; ou
  2. utiliser la fonction d'IE document.createStyleSheet() méthode

En outre, la vérification de l'existence d'un lien déjà ajouté ne fonctionne pas de manière fiable sur tous les navigateurs.

Je remettrais également en question une partie de votre prémisse :

Je veux éviter de charger les fichiers JS et CSS de la lightbox au moment du chargement, sauf si l'utilisateur le demande.

Pourquoi ? Pour réduire le poids des pages ? 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 lightbox dedans, et sans, pour voir si la réduction en vaut la peine :

  1. la complexité supplémentaire du chargement à la demande ; et
  2. la réactivité légèrement réduite de la boîte à lumière (car lorsqu'elle se charge à la demande, la boîte à lumière doit attendre que ses propres CSS et JS se chargent avant de pouvoir faire son travail).

Après minification et gzippage, il se peut qu'il n'y ait pas une grande différence.

N'oubliez pas que vous pouvez demander au navigateur de mettre en cache vos CSS et JS pendant une longue période, ce qui signifie qu'ils ne seront téléchargés que lorsqu'un utilisateur visitera votre site avec un cache vide.

Répondu el 24 de Janvier, 2010 par Paul D. Waite (35456 Points )

28voto

Cody avatar
Cody Points 1198 
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
Répondu el 25 de Octobre, 2012 par Cody (1198 Points )

12voto

Reigel avatar
Reigel Points 34008

Vous pourriez le faire :

$('<link>').attr('rel','stylesheet')
  .attr('type','text/css')
  .attr('href','link_to.css')
  .appendTo('head');
Répondu el 24 de Janvier, 2010 par Reigel (34008 Points )

5voto

zombat avatar
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 rendu normalement, ce qui entraîne dans ce cas l'extraction d'une feuille de style externe.

Faites également attention à la réponse de cletus, car si vous n'êtes pas prudent avec le chargement dynamique de contenu statique, cela peut finir par vous coûter en temps de chargement de la page et en transfert de ressources excessif.

Répondu el 24 de Janvier, 2010 par zombat (46702 Points )

2voto

cletus avatar
cletus Points 276888

En général, il est préférable d'inclure tout ce dont vous avez besoin, en supposant que vous le faites correctement.

J'entends par là que les meilleures pratiques pour le contenu statique (images, Javascript, CSS) sont les suivantes :

  • minimiser les requêtes HTTP externes (minimiser le nombre de fichiers) ;
  • version des fichiers et utiliser un en-tête Expires beaucoup plus futur ;
  • minifier et compresser le contenu selon les besoins.

Ainsi, un utilisateur ne téléchargera qu'une seule fois un fichier donné, jusqu'à ce qu'il soit modifié.

Le chargement dynamique de CSS et de Javascript, à moins qu'il ne soit exceptionnellement important, est généralement injustifié et contre-productif.

Répondu el 24 de Janvier, 2010 par cletus (276888 Points )

Questions en vedette

Top Tags

Dans notre réseau

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:

Yandex
X