Обнаруживать нагрузку на ресурсы <link>?

Question

Браузеры предоставляют события загрузки для тегов <script> и <img>. Есть ли способ определить, завершен ли запрос к элементу?

В частности, я хочу определить, когда была загружена таблица стилей <link>.

К сожалению, я думаю, что использование сторожевого стиля и определение нагрузки с 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;
}