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

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 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, поскольку это приведет к сообщениям об ошибках из-за поведения браузера.

Ответ 5

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

Вам нужно установить href attr last и только после добавления элемента elem в голову.

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

Ответ 6

jQuery(function(){

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

});

Ответ 7

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

Ответ 8

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

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

http://ajh.us/async-css

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