Question

由于其他一些约束，我必须通过jQuery加载我的CSS：

$('head').append($('<link rel="stylesheet" type="text/css" />')
         .attr('href', 'http://path/MyCSS.css'));

问题是，通常的jQuery页面加载函数

$(function () {
   myFunc();
});

未按预期工作。 myFunc应该做与加载的CSS相关的事情。现在因为我无法确定何时下载CSS并将其添加到我的HTML中，我不知道如何以及何时调用myFunc？

Answer 1

通过ajax调用，您可以确保已加载整个css。

$( document ).ready(function() {
    $.ajax({
        url: 'your_css_link',
        dataType: 'text',
        success: function(css) {
            $('<style type="text/css">\n' + css + '</style>').appendTo("head");
            myFunc();                 
        }                  
    });
});

Answer 2

链接样式表标记上的加载事件有很多问题，但您可以使用image.onerror loading hack

var head = document.getElementsByTagName( "head" )[0],
    body = document.body,
    css = document.createElement( "link" ),
    img = document.createElement( "img" ),
    cssUrl = "/path/to/a/css/file.css";

css.href = cssUrl;
css.rel = "stylesheet";
head.appendChild( css );

img.onerror = function() {
    // Code to execute when the stylesheet is loaded
    body.removeChild( img );
}

body.appendChild( img );
img.src = cssUrl;

然后在img.onerror方法中：

img.onerror = function() {
    body.removeChild(img);
    jQuery(function($) {
        // stylesheet is loaded and the DOMContentLoaded event is also fired
    });
}

Answer 3

您应该可以通过修改上面的内容，但只需一次调用即可完成。

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

这不适用于小于8的IE，因此您需要：

在设置其href之前附加;或
使用IE的document.createStyleSheet（）方法

Answer 4

你尝试使用load而不是ready，有时候工作n_n

link元素有加载和错误事件，因此您可以使用它们来确定是否加载了css

通过jQuery和页面加载功能加载CSS

4 个答案: