$.getScript, mais pour les feuilles de style en jQuery?

Titre dit tout. Est-il un $.getScript équivalent en jQuery, mais pour le chargement des feuilles de style?

  • voir ceci: stackoverflow.com/a/3994218/350858
  • Vous pouvez facilement charger et de les injecter le CSS, mais de tirer un rappel lorsque le CSS a été chargé ET appliqué à la DOM est proche de l'impossible. Vous pourriez avoir besoin pour l'installation d'un des éléments de test, faire le CSS s'appliquent à certains styles, puis testez à l'aide de l'intervalle lorsque cet élément a les styles s'applique par la CSS.
InformationsquelleAutor Lucas - Better Coding Academy | 2013-02-17
  1. 36

    CSS n'est pas un script, de sorte que vous n'avez pas à "exécuter" dans le sens de l'exécution du script.

    Fondamentalement un <link> tag créé à la volée et ajouté à l'en-tête devrait suffire, comme

    $('<link/>', {
   rel: 'stylesheet',
   type: 'text/css',
   href: 'path_to_the.css'
}).appendTo('head');

    ou

    var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';

    si vous voulez le faire sans jQuery.

    Le navigateur va répondre au changement dans les DOM et mise à jour de votre mise en page en conséquence.

    MODIFIER:

    J'ai lu que le vieux Internet Explorer a de la difficulté avec cela, et vous pourriez avoir besoin de le faire comme en réponse à la faire fonctionner:

    https://stackoverflow.com/a/2685639/618206

    EDIT2:

    La lecture du contenu d'un fichier et de le mettre en ligne (entre <style> tags) est aussi une solution valable, mais de cette façon, le CSS ne sera pas mis en cache par le navigateur.

    • Ce n'est pas vraiment un équivalent, car il n'y a pas de rappel pour quand le CSS est "prêt".
    • Ce qui est vrai. Si vous souhaitez un rappel, vous pouvez utiliser getScript, et insérer le contenu en ligne.
    • c'est une option, mais il n'est toujours pas fiable (selon l'utilisation). Même si vous savez que le fichier CSS est chargé, il ne veut pas dire que c'est des styles a été appliquée pour les DOM.
    • Gardez à l'esprit que même getScript ne garantit pas que le callback sera appelée après l'exécution du script. Pour référence: api.jquery.com/jQuery.getScript je ne suis pas sûr si vous avez aucun moyen de savoir si un style a encore été appliqué.
    • Bon point sur getScript!
    InformationsquelleAutor SoonDead
  2. 3

    J'ai créé une alternative à $.getScript que les poignées de feuilles de style. Je l'ai appelé $.getStylesheet pour des raisons évidentes.

    Il met en œuvre la $.Deferred objet, ce qui signifie que vous pouvez de la chaîne des choses de la sorte:

    $.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
  console.log('the css and js loaded successfully and are both ready');
}, function () {
  console.log('an error occurred somewhere');
});

    Voici la petite fonction $.getStylesheet. C'est juste hébergé sur Github gist, afin que je puisse le mettre à jour si j'en ai besoin.

    • L'ajout d'un <link> vers les DOM est presque instantanée. Pourquoi l'envelopper dans un différé?
    • c'est pour émuler la même API. Sans le $.Deferred Vous ne pourriez pas utiliser $.when à tous.
    • Je ne comprends toujours pas pourquoi voudriez-vous envelopper dans une quand. Vous sont effectivement mieux le déplacement de la $.getStylesheet ligne avant le quand et obtenir exactement le même résultat. Après cela vous pouvez prendre une autre étape à déballer de la différés et toujours obtenir exactement le même résultat.
    • Tout d'abord, vous n'avez pas à utiliser when, c'est juste un exemple de la raison pour laquelle vous voulez utiliser cette technique. Dites que vous voulez faire une demande pour 2 scripts et 2 feuilles de style et que vous voulez attendre jusqu'à ce que tout ce qui est fait, alors faites quelque chose d'autre. C'est une approche pour le faire proprement et de manière succincte.
    • Notez que vous n'avez pas terminé votre reportés lorsque "tout ce qui est fait". Vous remplissez votre différé lorsque le lien tag est ajouté au dom. Cela ne garantit pas quelque chose à faire.
    InformationsquelleAutor james2doyle
  3. 2

    vous pouvez utiliser la même méthode $.getScript sur "télécharger" feuille de style, puisque $.getScript en fait est juste une autre requête HTTP. mais il sera un peu câblé depuis css n'est pas exécutable.

    InformationsquelleAutor spiritwalker