web-dev-qa-db-fra.com

Comment charger les CSS de manière asynchrone sans utiliser JavaScript?

Supposons que si j'ai un site Web http://somethingsomething.com

Et j'ai 3 fichier css 

  • common.css
  • homepage.css
  • inner-pages.css

homepage.css est requis pour la page d'accueil et common.css pour le site entier, mais inner-pages.css pour les autres pages uniquement et son fichier volumineux. Est-il possible de charger inner-pages.css après le téléchargement des données de la page d'accueil. De la même manière que nous utilisons l'attribut async pour la balise script. Autant que je sache, l'attribut async concerne uniquement JS et pas CSS

un de mes amis a suggéré d’utiliser requirejs pour cela http://requirejs.org/docs/faq-advanced.html#css mais je ne veux pas utiliser javascript pour charger les fichiers css et même, je pense à JS Je ne voudrais pas utiliser require.js juste pour cela. Donc, si ce n'est pas possible avec CSS uniquement. Quel serait le moyen simple JS de faire cela?

cssperformance
16
Jitendra Vyas

CSS async avec media = "fictif" et un <link> au pied Disons que notre code HTML est structuré comme suit:

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

Plus à http://codepen.io/Tigt/post/async-css-without-javascript

9
Abhishek Gupta

Vous pouvez placer un iframe dans votre page pointant sur une page factice servant le CSS, qui devrait servir le fichier CSS de manière asynchrone.

<iframe src="loadcss.html"></iframe>

Notez que cela semble assez trivial, cela entraîne un minimum de 2 transferts de fichiers CSS par page et de 3 transferts de fichiers CSS par page enfant (si elle n'est pas mise en cache). Si vous deviez minimiser le css, vous n'auriez qu'un transfert, peu importe.

1
David Nguyen

essayer

$.ajax({
    url:'/css.css',
    type:'get',
    success:function(css){
        $('html').append('<style>'+css+'</style>');
    }
});

ou

function getCss(url){
    $('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}

getCss('/css.css');

ok désolé je n'ai pas vu que vous ne voulez pas utiliser javascript

que diriez-vous d'utiliser css @import:

<style>
@import url('/style1.css');
@import url('/style2.css');
</style>
1
user2678106

Incluez votre CSS dans le <body> au lieu de <head> ... "il semblerait que cette astuce force Chrome et Firefox à démarrer le corps plus tôt, et ils ne bloquent tout simplement pas les feuilles de style de corps." et ajouter une condition pour IE:

tête

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
  <![endif]-->
</head>

body

<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

par Taylor Hunt @ codepen.io

0
Yatko