javascript - 检测 <link> 资源的负载？

Question

浏览器为 <script> 提供加载事件和 <img>标签。有没有办法检测对元素的请求是否已完成？

具体来说，我希望检测 <link> 何时出现'd 样式表已加载。

不幸的是，我认为使用哨兵样式并检测来自 computedStyle 的负载在我的情况下不可行。

Answer 1

可能有更简单的方法，但这对我有用。

确保您的 <link>标签有一个 title属性:

<link title="myStyles" rel="stylesheet" href="style.css" />

然后使用这样的函数来检查特定样式集中是否存在样式:

function linkLoaded(linkTitle, checkStyle)
{
    for (var ix=0; ix<document.styleSheets.length; ix++) {
        try {
            if (document.styleSheets[ix].title == linkTitle) {
                var mySheet=document.styleSheets[ix];
                var myRules = mySheet.cssRules? mySheet.cssRules: mySheet.rules
                for (var jx=0; jx<myRules.length; jx++) {
                    var thisSelector = myRules[jx].selectorText.toLowerCase();
                    if (thisSelector.substring(0, checkStyle.length) == checkStyle) {
                        alert("Found style!");
                        return;
                    }
                }
            }
        }
        catch (err) {}    
    }

    alert("Not loaded!");
    return;
}