Dans l'optique d'optimiser le rendu d'une page Web, il est recommandé de ne charger les règles d'affichage CSS seulement lorsqu'elles sont utiles. Pour répondre à cette contrainte, le plugin JavaScript "loadStyle" permet de charger des fichiers CSS ou des portions de règles CSS de façon dynamique dans une page.
Charger un fichier CSS avec le plugin "loadStyle"
Après avoir inséré le plugin dans votre page, il suffit d'appeler la méthode "loadStyle" avec le chemin d'un fichier CSS. Le plugin va ainsi insérer le fichier de façon dynamique dans la page.
<html>
<head>
<meta charset="utf-8">
<!-- Insertion du plugin "loadStyle" dans la page -->
<script src="./loadStyle.js"></script>
<!-- Utilisation du plugin -->
<script>
// Attente du chargement complet de la page
window.addEventListener('load', function() {
// Chargement du script
loadStyle('https://url-du-fichier-css.com');
});
</script>
</head>
<body>
</body>
</html>Charger des règles CSS directement dans la page
Pour charger directement des règles CSS dans la page, il suffit d'appeler le plugin et de fournir en argument une chaîne de caractères contenant ces règles au lieu d'une URL de fichier. Le plugin se chargera de créer une balise "style" CSS pour les y insérer.
loadStyle('body { background: blue; }');Options du plugin "loadStyle"
Il est possible de charger un script avec quelques options :
- "parentTag" : permet de spécifier dans quelle balise on souhaite insérer le script
- "attributes" : permet de lister des attributs HTML à appliquer à la balise "link" ou "style" insérée
- "callback" : permet d'exécuter du code JavaScript une fois que le style a été chargé
Voici un exemple de chargement dynamique de la librairie Bootstrap avec ces options :
...
// URL du fichier CSS
var url = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
// Options du plugin
var options = {
// Balise parente
parentTag: document.body,
// Attributs à appliquer à la balise "style" (exemples)
attributes: {
integrity: 'sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==',
crossorigin: 'anonymous'
},
// Fonction à exécuter lorsque le script est téléchargé
callback: function() {
document.body.appendChild(document.createTextNode('CSS Bootstrap téléchargée et prête à l'emploi.'));
},
};
// Chargement du fichier CSS
loadStyle(url, options);
...Exemple complet et téléchargement
C'est la fin de cet article, vous pouvez optimiser le chargement de vos pages avec le plugin "loadStyle" à disposition via le bouton de téléchargement suivant :)
Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !