Question

样式表完成加载后如何运行函数？

这是我的代码。

var d = document,
    css = d.head.appendChild(d.createElement('link'))

css.rel = 'stylesheet';
css.type = 'text/css';
css.href = "https://unpkg.com/tachyons@4.10.0/css/tachyons.css"

Answer 1

根据MDN的<link>: The External Resource Link element

您可以通过监视要触发的load事件来确定何时加载样式表。同样，您可以通过监视error事件来检测在处理样式表时是否发生了错误：
<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // Do something interesting; the sheet has been loaded
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">
_{注意：加载并解析了样式表及其所有导入的内容之后，并且即将开始将样式应用于内容之前，load事件就会触发。}

Answer 2

这是一个跨浏览器解决方案，已针对接受CSS onload的现代浏览器进行了优化。当Opera和Internet Explorer仅在css上分别支持onload事件和onreadystatechange时，它可以追溯到2011年。请参阅下面的链接。

var d = document,
    css = d.head.appendChild(d.createElement('link')),
    src = "https://unpkg.com/tachyons@4.10.0/css/tachyons.css"

css.rel = 'stylesheet';
css.type = 'text/css';
css.href = src

在加载程序之后添加它

if (typeof css.onload != 'undefined') css.onload = myFun;
else {
    var img = d.createElement("img");
    img.onerror = function() {
      myFun();
      d.body.removeChild(img);
    }
    d.body.appendChild(img);
    img.src = src;
}

function myFun() {
    /* ..... CONTINUE CODE HERE ..... */
}

答案基于this link，其内容为：

幕后发生的事情是浏览器尝试加载 img 元素中的CSS，并且因为样式表不是图像中， img 元素引发 onerror 事件并执行功能。值得庆幸的是，浏览器在加载整个CSS文件之前确定其不是图像并触发 onerror 事件。

CSS样式表完成加载后如何运行函数

2 个答案: