$.getScript, но для таблиц стилей в jQuery?

Ответ 1

CSS не является script, поэтому вам не нужно "выполнять" его в смысле выполнения script.

В принципе тег <link>, созданный "на лету" и добавленный к заголовку, должен быть достаточным, например

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

или

var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';

если вы хотите сделать это без jQuery.

Браузер будет реагировать на изменение DOM и соответствующим образом обновлять макет страницы.

ИЗМЕНИТЬ

Я прочитал, что у старого Internet Explorer есть проблемы с этим, и вам может понадобиться сделать это, как в ответ, чтобы заставить его работать:

fooobar.com/questions/29814/...

EDIT2

Чтение содержимого файла и его встроенное (между тегами <style>) также является допустимым решением, но таким образом CSS не будет кэшироваться браузером.

Ответ 2

Я создал альтернативу $.getScript, которая обрабатывает таблицы стилей. Я назвал его $. GetStylesheet по понятным причинам.

Он реализует объект $.Deferred, что означает, что вы можете так цепляться:

$.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
  console.log('the css and js loaded successfully and are both ready');
}, function () {
  console.log('an error occurred somewhere');
});

Вот небольшая функция для $. GetStylesheet. Он просто размещен в Github gist, поэтому я могу его обновить, если мне нужно.

Ответ 3

вы можете использовать тот же метод $.getScript для "загрузки" таблицы стилей, поскольку $.getScript - это просто еще один HTTP-запрос. но он будет немного подключен, так как css не является исполняемым.

Ответ 4

Вот функция, которая будет загружать файлы CSS с обратным вызовом в случае успеха или неудачи. Я думаю, что этот подход лучше, чем принятый ответ, потому что вставка элемента в DOM с HREF вызывает дополнительный запрос браузера (хотя, скорее всего, запрос будет поступать из кэша, в зависимости от заголовков ответа).

function loadCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            return $.get(url, function(css) {
                $("<style>" + css + "</style>").appendTo("head");
            });
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}

Использование как таковое:

loadCssFiles(["https://test.com/style1.css", "https://test.com/style2.css",],
    function() {
    alert("All resources loaded");
}, function() {
    alert("One or more resources failed to load");
});

Вот еще одна функция, которая будет загружать как CSS , так и файлы JavaScript:

function loadJavascriptAndCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            if(url.endsWith(".css")) {
                return $.get(url, function(css) {
                    $("<style>" + css + "</style>").appendTo("head");
                });
            } else {
                return $.getScript(url);
            }
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}