$.getScript，但是对于 jQuery 中的样式表？答案

【问题标题】：$.getScript, but for stylesheets in jQuery?$.getScript，但是对于 jQuery 中的样式表？
【发布时间】：2013-02-01 21:57:47
【问题描述】：

在 jQuery 中是否有 $.getScript 等效项，但用于加载样式表？

【问题讨论】：

看到这个:: stackoverflow.com/a/3994218/350858
您可以轻松地加载和注入 CSS，但是当 CSS 已加载并应用于 DOM 时触发回调几乎是不可能的。您可能需要设置一个测试元素，让 CSS 应用一些样式，然后在该元素具有 CSS 应用的样式时使用间隔进行测试。

标签： jquery css load stylesheet

【解决方案1】：

CSS 不是脚本，因此您不必在脚本执行的意义上“执行”它。

基本上一个 <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 在这方面存在问题，您可能需要像在回答中那样做才能使其正常工作：

https://stackoverflow.com/a/2685639/618206

EDIT2：

读取文件内容并将其内联（<style> 标签之间）也是一种有效的解决方案，但这样 CSS 将不会被浏览器缓存。

【讨论】：

这并不是真正的等价物，因为当 CSS “准备好”时没有回调。
确实如此。如果你想得到一个回调，你可以使用getScript，并内联插入内容。
这是一个选项，但仍然不可靠（取决于使用情况）。即使您知道 CSS 文件已加载，也不意味着它的样式已应用于 DOM。
请记住，即使 getScript 也不能保证在脚本执行后会调用回调。供参考：api.jquery.com/jQuery.getScript我不确定您是否有任何方法可以判断是否已应用样式。

【解决方案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 上，所以如果需要，我可以更新它。

【讨论】：

向 DOM 添加<link> 几乎是瞬间完成的。为什么将其包装在延迟中？
@SoonDead 是为了模拟相同的 API。没有$.Deferred，你根本无法使用$.when。
我还是不明白你为什么要把它包装在什么时候。实际上，您最好在 when 之前移动 $.getStylesheet 行并获得完全相同的结果。之后，您可以采取其他步骤将其从 deferred 中解开，并且仍然得到完全相同的结果。
@SoonDead 首先，你不必使用when，这只是你为什么要使用这种技术的一个例子。假设您想向 2 个脚本和 2 个样式表发出请求，并且您想等到所有这些都完成，然后再做其他事情。这是一种简洁明了的方法。
请注意，当“所有事情都完成”时，您并没有完成延期。当链接标签被添加到 dom 时，您完成了 deferred。这并不保证会做任何事情。

【解决方案3】：

您可以使用相同的方法 $.getScript 来“下载”样式表，因为 $.getScript 实际上只是另一个 HTTP 请求。但它会有点连线，因为 css 是不可执行的。

【讨论】：

【解决方案4】：

这是一个函数，它将加载带有成功或失败回调的 CSS 文件。我认为这种方法比接受的答案更好，因为使用 HREF 将元素插入 DOM 会导致额外的浏览器请求（尽管请求可能来自缓存，具体取决于响应标头）。

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

}

【讨论】：