jQuery 追加 CSS 文件并等待加载？答案

【问题标题】：jQuery Append CSS File and Wait until Loaded?jQuery 追加 CSS 文件并等待加载？
【发布时间】：2012-02-04 17:39:49
【问题描述】：

我正在尝试使用

附加一个css文件

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

效果很好 - 但是，我有一些在添加 css 之后运行的函数，我无法找到一种方法让这些函数等到这个文件完成加载？

我该怎么做？

【问题讨论】：

有什么理由不能在不使用 jquery 的情况下从一开始就将 css 包含在 <head> 块中？

标签： jquery css append

【解决方案1】：

首先要做的就是将你的函数放在 ready 方法中，它会在 DOM 加载后执行这些函数。

<script type="text/javascript">
  jQuery(document).ready(function() {
    // Your functions come here
});
</script>

然后把你的脚本放在

【解决方案2】：

只需检查何时应用了新 CSS 的规则之一：

$('head').append('<link rel="stylesheet" href="http://cdn.sstatic.net/stackoverflow/all.css?v=d4a5c7ca0d4c" type="text/css" />');

var fakeListener = setInterval(function(){
    if($("body").css("text-align")=== "center"){
        clearInterval(fakeListener)
        // What you want to do after it loads
    }
},50)

（这是一个工作示例）

【讨论】：

我可以看到它是如何工作的，但它充其量只是 hacky。它也不适用于我的场景，因为在加载 CSS 时我没有创建相应的 DOM 元素。当用户在前端执行一些操作时，DOM 元素会在很晚（可能几分钟后）创建。
在检查 css 规则之前检查元素是否存在，像这样：if($('article').length && $('article').css('text-align') === 'center')...