Как загрузить CSS асинхронно без использования JavaScript?

Предположим, что у меня есть веб-сайт http://somethingsomething.com

И у меня есть 3 файла css

common.css
homepage.css
внутренний-pages.css

homepage.css требуется для главной страницы, а common.css - для всего сайта, но inner-pages.css предназначен только для других страниц и большого файла. Можно ли загрузить inner-pages.css после загрузки исходных данных. Точно так же, как мы используем атрибут async для тега script. Насколько мне известно, атрибут async предназначен только для JS, а не для CSS

мой один друг предложил использовать requirejs для этого http://requirejs.org/docs/faq-advanced.html#css, но я не хочу использовать javascript для загрузки css, и даже я бы подумал о JS way я не будет использовать require.js только для этого. Поэтому, если это невозможно с помощью CSS. Каким будет простой способ JS для этого?

Ответ 1

Async CSS со средой = "фиктивный" и <link> у подножия Скажем, у нас наш HTML структурирован следующим образом:

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

Подробнее в http://codepen.io/Tigt/post/async-css-without-javascript

Ответ 2

Вы можете разместить iframe на своей странице, указывая на какую-то фиктивную страницу, которая обслуживает CSS, который должен обслуживать файл async для CSS.

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

Заметьте, что это выглядит довольно тривиально, это приводит к тому, что на каждую страницу передается как минимум 2 css файла на каждую страницу и 3 передачи файлов css на одну дочернюю страницу (если она не кэширована). Если вы хотите минимизировать css, у вас будет только 1 передача независимо.

Ответ 3

попробовать

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

или

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

getCss('/css.css');

ОК извините, я не видел, что вы не хотите использовать javascript

как насчет использования css @import:

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

Ответ 4

Включите свой CSS в <body> вместо <head>... "кажется, этот трюк заставляет Chrome и Firefox запускать тело раньше, и они просто не блокируют таблицы стилей тела". и добавьте условие для IE:

голова

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

Тело

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

Тейлор Хант @codepen.io

Ответ 5

Как предложено, Require не требуется для загрузки ресурсов CSS. Если вы хотите асинхронно получать большие полезные данные, не полагаясь на JavaScript, вам следует обратить внимание на использование HTTP/2 Server Push для предоставления ресурсов, не имеющих решающего значения. И здесь метод повышения производительности, который вы можете найти полезным для доставки критических полезных нагрузок CSS для браузеров, хорошо работает даже сегодня.

Наконец, если вы оптимизируете свои страницы для повышения производительности и не хотите использовать тяжелые или сложные инструменты, такие как Require, у меня есть альтернативный минимальный загрузчик ресурсов, который вы можете использовать, если хотите.