Existe-t-il un moyen de détecter le chargement complet d'un fichier CSS?

Question

J'ai testé beaucoup de paresseux-chargeurs pour JavaScript et CSS d'insertion de la balise <script> et les balises <link> pour charger les fichiers. Cependant le problème est, qu' <link> tags ne pas le feu onload il est donc difficile de détecter le moment où ils sont chargés. La seule solution que j'ai trouvé pour cela est de fixer display: none; (en CSS le fichier qui doit être chargé) sur un mannequin élément et de sondage de l'élément à vérifier quand il a été mis en display: none. Mais qui, en plus d'être laid, bien sûr, ne fonctionne que pour un seul CSS le fichier.

Alors je me demandais; Est-il un autre moyen de détecter si un CSS le fichier a été chargé?

Merci, Lukas

--

PS: Trouvé une solution, c'est tout en bas de cette page. (Je suis nouveau sur stackoverflow et je suis sûr que la réponse est censé être à la base, mais je pense qu'il pourrait facilement être supervisé si googleusers stuble sur cette page, j'ai donc écrit ce petit billet)

Answer 1

Ok, j'ai enfin trouvé une solution.

Ce mec http://tugll.tugraz.at/96784/weblog/9080.html insère le lien-les balises et les sondages document.les feuilles de style[index].règles jusqu'à ce qu'il n'est plus non défini (où l'indice est évidemment l'indice du nouveau fichier inséré). Malheureusement, son code est buggé et ne fonctionne qu'avec Safari et FF. Donc, j'ai corrigé les bugs, des fonctionnalités supplémentaires pour l'Opéra et Internet Explorer et même ajouté des fonctionnalités pour l'ajout de plusieurs les fichiers CSS et JS et 1 finale de rappel (lorsque tous les fichiers sont chargés), dans une douce et simple lazyloader-fonction. Le résultat peut être trouvé ici:

https://github.com/LukasBombach/Lazyloader

Answer 2

Edit: (en Raison de la possible de ne pas soutenir WebKit)

Donc, je préfère recommander JQuery CHARGEUR

$("a.button, input.button, button.button").Loader(
{
    url: [
        'core.css',
        'theme.css',
        'button.css'
    ],
    success: function() {
        $(this).button();
    }
});

---

Vous pouvez prendre un coup d'oeil à LazyLoad bibliothèque JavaScript.

LazyLoad is a tiny (only 1,541 bytes minified), dependency-free

Bibliothèque JavaScript qui rend super facile à charger JavaScript externe et (de nouveau dans cette version) CSS fichiers sur de la demande. Il est idéal pour rapidement et discrètement le chargement d'un grand externes les scripts et les feuilles de style, soit paresseusement après le reste de la page a fini de se charger, ou à la demande nécessaire.

In addition to CSS support, this version of LazyLoad also adds support

en parallèle, le chargement de plusieurs ressources dans les navigateurs qui le supportent. Pour charger plusieurs ressources dans en parallèle, il suffit de passer un tableau d'Url en un seul LazyLoad cal

Answer 3

Essayez d'ajouter une certaine règle CSS à la fin de votre fichier et attendez que le CSS soit appliqué (vérifiez cela via JavaScript). Après cela, vous pouvez être sûr que le CSS a été chargé. Cependant, je n'ai aucune expérience avec cela. Une idée rapide peut valoir la peine d'être essayée.

Answer 4

Pas simplement de creuser et de vieux sujet, mais puisque c'est toujours à l'affiche jusqu'en haut des résultats de Google, j'ai voulu offrir un aperçu de ce qui pourrait avoir changé.

Selon l'un des derniers paragraphes sur Mozilla documentation de , un événement de chargement peut être fixée à un élément de lien dans FF versions 9 et jusqu'ainsi que Chrome 19 et. IE et Safari ne sont pas indiqués. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Espérons que l'aide à quelqu'un.

Answer 5

En utilisant un chargeur de script comme Supply , cela ressemblerait à:

 supply.listen('text/css', function(payload, filename) {
    switch(filename) {
        case: 'foo.css': {
            // do something
            break;
        }
        case: 'baseball.css': {
            break;
        }
        // ...
    }
});

supply.files({
    stylesheet: [
        'foo.css',
        'baseball.css'
    ]
});
 

Réf .: SupplyJS