web-dev-qa-db-fra.com

Comment charger de manière asynchrone CSS à l'aide de jQuery?

Je souhaite utiliser jQuery pour charger de manière asynchrone CSS pour un document.

J'ai trouvé cet échantillon, mais cela ne semble pas fonctionner dans IE:

<script type="text/javascript" src="/inc/body/jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('<link>', {
            rel: 'stylesheet',
            type: 'text/css',
            href: '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'
        }).appendTo('head');
        $.getScript("/inc/body/jquery/js/jquery-ui-1.8.10.custom.min.js", function(){
        });
    });
</script>

En gros, je veux charger jQuery UI après que toutes les autres données, images, styles, etc. soient chargés sur la page.

Le $.getScript fonctionne très bien pour le fichier JS. Le seul problème est avec CSS dans IE.

Connaissez-vous une meilleure solution?

jquerycssjquery-uiasynchronous
20
Adam Lukaszczyk

Cela devrait fonctionner dans IE:

$("head").append("<link rel='stylesheet' type='text/css' href='/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css' />");
20
Peter Olson

Voici une méthode pour asynchrone stylesheet chargeant que ne bloque pas le rendu de page qui a fonctionné pour moi:

https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js

Exemple réduit du code lié ci-dessus, basé sur la réponse de lonesomeday

var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);
41
Dmitry Pashkevich

Le moyen sûr est l'ancien moyen ...

var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
31
lonesomeday

Comme mentionné dans RequireJS docs , la difficulté réside dans le {not} _ dans le chargement du CSS:

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

mais en sachant quand/si le CSS a été chargé avec succès, comme dans votre cas d'utilisation "je veux charger l'interface utilisateur jQuery after toutes les autres données, images, styles, etc.".

Idéalement, RequireJS pourrait charger des fichiers CSS en tant que dépendances. Cependant, il existe des problèmes pour savoir quand un fichier CSS a été chargé, en particulier dans Gecko/Firefox lorsque le fichier est chargé à partir d'un autre domaine. Une certaine histoire Peut être trouvée dans ce ticket Dojo.

Il est important de savoir quand le fichier est chargé, car vous voudrez peut-être seulement Saisir les dimensions d'un élément DOM une fois que la feuille de style aura chargé .

Certaines personnes ont mis en œuvre une approche consistant à rechercher un style bien À appliquer à un élément HTML spécifique pour savoir si une feuille de style Est chargée. En raison de la spécificité de cette solution, Ne convient pas à RequireJS. Savoir quand l'élément de lien A chargé le fichier référencé serait la solution la plus robuste .

Sachant que le chargement du fichier n'est pas fiable, N'a pas de sens de prendre en charge explicitement les fichiers CSS lors du chargement de RequireJS, car Donnera lieu à des rapports de bogue dus au comportement du navigateur.

10
Hendy Irawan

Selon Le chargement dynamique de la feuille de style css ne fonctionne pas sur IE :

Vous devez définir le paramètre href attr en dernier et uniquement après l’ajout de l’élément de lien à la tête.

$("<link>")
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');
1
ekerner

Aucune des solutions ici ne charge réellement le fichier CSS sans bloquer le rendu de la page - ce qui est généralement ce que l’on entend par "asynchrone". .)

Des exemples de chargement synchrone et asynchrone peuvent être trouvés ici:

http://ajh.us/async-css

J'ai constaté que l'utilisation d'une setTimeout pour différer le chargement semble aider.

0
Alan H.
jQuery(function(){

jQuery('head').append('<link href="/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />')

});
0
Praveen Prasad
$.get("path.to.css",function(data){
    $("head").append("<style>"+data+"</style>");
});
0
noamtcohen