Как асинхронно загрузить CSS с помощью jQuery?

Question

Я хочу использовать jQuery для асинхронной загрузки CSS для документа.

Я нашел этот образец, но в 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>

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

$.getScript отлично работает для файла JS. Единственная проблема с CSS в IE.

Знаете ли вы лучшее решение?

Answer 1

Вот метод асинхронной загрузки таблицы стилей, который не блокирует рендеринг страницы , который работал для меня:

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

Сокращенный пример кода, связанного выше, основанный на ответе одного дня

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

Answer 2

Безопасный путь - это старый путь ...

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

Answer 3

Это должно работать в IE:

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

Answer 4

Как упомянуто в RequireJS docs , сложная часть заключается не в загрузке 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);
}

, но в знании, когда / был ли загружен CSSуспешно, как в вашем случае использования "Я хочу загрузить jQuery UI после всех других данных, изображений, стилей и т. д.".

В идеале RequireJS может загружать файлы CSS какзависимостей.Однако есть проблемы, зная, когда файл CSS был загружен, особенно в Gecko / Firefox, когда файл загружается из другого домена.Некоторая история может быть найдена в этом билете Dojo.

Важно знать, когда файл загружен, потому что вы можете захотеть получить размеры элемента DOM только после загрузки таблицы стилей.

Некоторые люди реализовали подход, где они ищут хорошо известный стиль, который будет применен к определенному элементу HTML, чтобы узнать, загружена ли таблица стилей.Из-за специфики этого решения, это не то, что подходит для RequireJS.Знание того, когда элемент ссылки загрузил указанный файл, было бы наиболее надежным решением.

Поскольку знание того, когда файл загружен, ненадежно, нет смысла явно поддерживать файлы CSS в загрузке RequireJS, посколькуприведет к сообщениям об ошибках из-за поведения браузера.

Answer 5

Согласно Динамическая загрузка таблицы стилей CSS не работает в IE :

Вам необходимо установить атрибут href attr последним и только после того, как элемент link добавляется к заголовку.

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

Answer 6

Ни одно из решений здесь на самом деле не загружает файл CSS без блокирования рендеринга страницы - что обычно подразумевается под «асинхронным». (Если браузер чего-то ждет и не позволяет пользователю взаимодействовать со страницей, ситуация такова.по определению синхронный.)

Примеры синхронной и асинхронной загрузки можно найти здесь:

http://ajh.us/async-css

Я обнаружил, что использование setTimeout для отсрочки загрузки кажетсяпомочь.

Answer 7

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

Answer 8

jQuery(function(){

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

});