Le chargement dynamique de fichier css à l'aide de javascript avec rappel sans jQuery
Je suis en train de charger un fichier css dynamiquement à l'aide de javascript et ne peut pas utiliser n'importe quel autre bibliothèque js (par exemple jQuery).
Le fichier css se charge, mais je n'arrive pas à obtenir un rappel à travailler pour elle. Ci-dessous est le code, je suis en utilisant
var callbackFunc = function(){
console.log('file loaded');
};
var head = document.getElementsByTagName( "head" )[0];
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", url);
fileref.onload = callbackFunc;
head.insertBefore( fileref, head.firstChild );
En utilisant le code suivant pour ajouter une balise de script pour charger un fichier js qui fonctionne et déclenche un rappel:
var callbackFunc = function(){
console.log('file loaded');
};
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
script.onload = callbackFunc ;
head.insertBefore( script, head.firstChild );
Je fais quelque chose de mal ici? Toute autre méthode qui peut m'aider à atteindre ce serait bien apprécié?
- Je proposerais que si il y a des bibliothèques que vous avez ne pas voulez utiliser, puis de ne pas marquer dans la question. Marquage néanmoins attire les [faux] type de développeur pour votre question.
- Très bien un double de stackoverflow.com/questions/3078584/link-element-onload. Si jQuery est utilisé ou non n'est pas pertinent (jQuery code peut être facilement converti à la vanille). Le principal problème est que, jusqu'à très récemment, WebKit n'a pas l'appui de la
load
événement pourlink
éléments. Et c'est un grand et encore très prevalant nombre de téléphones mobiles, iOS et Android. (Exceptionnellement, c'est à dire prend en charge l'événement depuis IE7 si pas plus tôt.)
Vous devez vous connecter pour publier un commentaire.
Malheureusement, il n'existe pas de onload de soutien pour les feuilles de style dans la plupart des navigateurs modernes. Il y a une solution je l'ai trouvé avec un peu de recherche sur Google.
Cité à partir de: http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof
Les bases
Les plus élémentaires de la mise en œuvre de ce qui peut être fait dans un measely 30 lignes de cadre indépendant — code JavaScript:
Cela vous permettra de charger une feuille de style avec un onload fonction de rappel comme ceci:
Ou si vous voulez faire de votre fonction de rappel pour maintenir sa portée et contexte, on pourrait faire quelque chose dans ce style:
link[sheet]
renvoie toujours null. avez-vous une idée à ce sujetsetTimeout
et une incrémentationtries
compteur qui renflouent sitries > maxTries
si vous êtes inquiet à ce sujet.Vous pouvez faire un vide css lien dans votre fichier html et donner le lien d'un ID. e.g
puis l'appeler avec un nom d'identification et de modifier le 'href' attribut
Il y a quelques temps j'ai fait une bibliothèque pour cela, il est appelé Dysel, j'espère que cela aide
Exemple:
https://jsfiddle.net/sunrising/qk0ybtnb/
Cette la vanille JS approche fonctionne dans tous les navigateurs modernes:
load
événement surlink
éléments.Voici comment nous le faisons. À l'aide de "requestAnimationFrame" (ou de secours à de simples "charge" de l'événement si elle n'est pas dispo).
Par la voie, c'est la façon dont Google recommande dans leur page "vitesse" de ce manuel:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
yepnope.js pouvez charger la CSS et de l'exécution d'un rappel à la fin. par exemple,