Comment charger CSS de manière asynchrone sans utiliser JavaScript?
supposons que j'ai un site web http://somethingsomething.com
et j'ai 3 fichier css
- commun.css
- page d'accueil.css
- intérieur-pages.css
homepage.css est nécessaire pour la page d'accueil et common.css est pour l'ensemble du site, mais inner-pages.css est pour les autres pages seulement et il est grand fichier. 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 l'étiquette script . Pour autant que je sache async attribut est seulement pour JS pas CSS
mon seul ami a suggéré d'utiliser requerjs pour ce http://requirejs.org/docs/faq-advanced.html#css mais je ne veux pas utiliser javascript pour charger css et même je penserais à JS way Je ne voudrais pas utiliser require.js juste pour cela. Donc, si ce N'est pas possible avec CSS seulement. quelle serait la façon la plus simple pour JS de faire ça?
4 réponses
Async CSS avec media="bidon" et un <link> au pied
Disons que nous avons notre HTML structuré comme ceci:
<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
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 vouliez pas utiliser javascript
Que diriez-vous d'utiliser css @import:
<style>
@import url('/style1.css');
@import url('/style2.css');
</style>
vous pouvez placer une iframe dans votre page pointant vers une page factice qui sert la CSS, qui devrait servir le fichier CSS async.
<iframe src="loadcss.html"></iframe>
ne notez pas qu'il semble assez trivial, cela provoque un minimum de 2 transferts de fichiers css par page et 3 transferts de fichiers css par page d'enfant (si elle n'est pas mise en cache). Si vous deviez minifier le css, vous n'auriez qu'un seul transfert.
incluez votre CSS dans le <body> au lieu de <head> ... "il semble que cette astuce provoque Chrome & Firefox pour démarrer le corps plus tôt, et ils ne bloquent tout simplement pas pour 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>
corps
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
par Taylor Chasse @codepen.io