it-swarm.com.de

Wie kann man CSS asynchron ohne Verwendung von JavaScript laden?

Angenommen, ich habe eine Website http://somethingsomething.com

Und ich habe 3 CSS-Datei 

  • common.css
  • homepage.css
  • innere-seiten.css

homepage.css ist für die Homepage erforderlich und common.css ist für die gesamte Site, aber inner-pages.css ist nur für andere Seiten und ist eine große Datei. Ist es möglich, inner-pages.css nach dem Herunterladen der Homepage zu laden. Genauso wie wir das async-Attribut für den script-Tag verwenden. Soweit ich weiß, ist das async-Attribut nur für JS nicht CSS

mein Freund schlug vor, die Verwendung von requirjs für dieses http://requirejs.org/docs/faq-advanced.html#css zu verwenden, aber ich möchte kein Javascript zum Laden von css verwenden, und sogar ich würde auf JS-Art denken Ich würde requir.js nicht nur dafür verwenden. Also wenn es nur mit CSS nicht möglich ist. Was wäre der einfache JS-Weg, dies zu tun?

16
Jitendra Vyas

Async-CSS mit media = "falsch" und einem <link> am Fuß Angenommen, wir haben unseren HTML-Code folgendermaßen strukturiert:

<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>

Mehr unter http://codepen.io/Tigt/post/async-css-without-javascript

9
Abhishek Gupta

Sie können einen iframe auf Ihrer Seite platzieren, der auf eine Dummy-Seite verweist, die das CSS bedient, die die CSS-Datei asynchron liefern soll.

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

Beachten Sie, dass dies ziemlich trivial erscheint. Dies verursacht mindestens 2 CSS-Dateiübertragungen pro Seite und 3 CSS-Dateiübertragungen pro untergeordneter Seite (wenn diese nicht zwischengespeichert ist). Wenn Sie die CSS minimieren würden, hätten Sie trotzdem nur eine Übertragung.

1
David Nguyen

versuchen

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

oder

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

getCss('/css.css');

ok sorry ich habe nicht gesehen, dass Sie kein Javascript verwenden möchten

wie wäre es mit css @import:

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

Wie vorgeschlagen ist Require nicht erforderlich, um CSS-Assets zu laden. Wenn Sie Ihre größeren Nutzdaten asynchron abrufen möchten, ohne auf JavaScript angewiesen zu sein, sollten Sie HTTP/2 Server Push einsetzen, um Ihre nicht kritischen Ressourcen bereitzustellen. Und hier ist eine Performance-Technik, die Sie vielleicht nützlich finden , um wichtige CSS-Nutzdaten für Browser bereitzustellen, die auch heute noch gut funktionieren.

Wenn Sie Ihre Seiten für die Leistung optimieren und keine schweren oder komplizierten Tools wie "Erforderlich" verwenden möchten, habe ich einen alternativen minimalen Asset Loader . Sie können verwenden, wenn Sie möchten.

0
Josh Habdas

Fügen Sie Ihr CSS in <body> anstelle von <head> ... ein. "Es scheint, dass Chrome & Firefox den Trick dazu veranlasst hat, den Body früher zu starten, und sie blockieren nicht einfach Body Stylesheets." und füge eine Bedingung für den IE hinzu:

Kopf

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

Karosserie

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

von Taylor Hunt @ codepen.io

0
Yatko