Je suis tombé il y a quelques temps sur un plug-in sympa pour jQuery qui permet de pré-charger les images des fichiers CSS (via). C'est utile dans un certain nombre de cas pour le webdev moderne. Ca m'avait plu et je voulais l'utiliser mais je me suis rendu compte qu'il ne prenait pas en compte les fichiers importés via la règle @import.
J'ai donc ré-écrit le script en améliorant 2 ou 3 petites choses :
- Je fais gaffe de parser seulement les CSS de type
@media screen - Je fais du récursif pour choper les éventuels styles
@importés(façon W3C et IE) - Je stock les règles dans un tableau pour éviter d'avoir une seule regex à appliquer sur une seule grosse chaîne, c'est plus performant
Le code source du plug-in : jquery.preloadcssimages.js
Pour l'utiliser, ça se passe sur l'événement window.onload :
$(window).load(function () {
$.preloadCssImages();
});Comme souvent il y a des avantages et des inconvénients. Si vous administrez un gros site avec des CSS qui font des milliers de lignes, ça vaut certainement pas le coup et ça va prendre du temps à parser. A vous de voir si le jeu en vaut la chandelle.
Il y a encore des axes d'améliorations (voir la source). Je suis preneur de tout feedback constructif :)
Joint