0

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

这是我的代码..

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"
4

2 回答 2

2

根据 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一旦样式表及其所有导入的内容被加载和解析，并且在样式开始应用于内容之前，该事件就会触发。

于 2019-05-13T19:23:10.927 回答
-1

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

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 ..... */
}

答案基于此链接说：

幕后发生的事情是浏览器尝试在img元素中加载 CSS，并且由于样式表不是图像类型，所以img元素会引发onerror事件并执行我们的函数。值得庆幸的是，浏览器会在确定它不是图像并触发onerror事件之前加载整个 CSS 文件。

于 2019-05-13T20:33:20.520 回答