it-swarm.com.ru

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

Я хочу использовать 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.

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

20
Adam Lukaszczyk

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

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

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

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);
41
Dmitry Pashkevich

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

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

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

10
Hendy Irawan

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

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

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

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

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

http://ajh.us/async-css

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

0
Alan H.
jQuery(function(){

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

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