Динамическая загрузка CSS

Question

Я пытаюсь создать функцию темы страницы для своего сайта.Я хочу загружать соответствующие темы динамически на странице, используя отдельные файлы CSS.

Я использую этот код:

  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", 'link.css')

  document.getElementsByTagName("head")[0].appendChild(fileref)

, который работает нормально, но не возвращает никакой информацииесли файл CSS загружен или нет.

Есть ли способ отловить при загрузке .css?Может быть, с помощью ajax?

Answer 1

Internet Explorer вызовет событие onReadyStateChange при загрузке файла CSS (или любое другое изменение его readyState). Другие браузеры не запускают никаких событий, поэтому вам придется вручную проверять, была ли загружена таблица стилей, что легко сделать, проверяя объект document.styleSheets с фиксированным интервалом.

Пример

window.onload = function (){
    var filename = "link.css",sheet,i;
    var fileref = document.createElement("link");

    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);

    readyfunc = function () {
        alert("File Loaded");
    }

    timerfunc = function (){
        for (i=0;i<document.styleSheets.length;i++){
            sheet = document.styleSheets[i].href;
            if(sheet !== null && sheet.substr(sheet.length-filename.length) == filename)
                return readyfunc();
        }
        setTimeout(timerfunc,50);  
    }

    if (document.all){ //Uses onreadystatechange for Internet Explorer
        fileref.attachEvent('onreadystatechange',function() {
            if(fileref.readyState == 'complete' || fileref.readyState == 'loaded')
                readyfunc();
        });
    } else {    //Checks if the stylesheet has been loaded every 50 ms for others
        setTimeout(timerfunc,50);
    }
    document.getElementsByTagName("head")[0].appendChild(fileref);    
}

Это ужасно, но работает во всех браузерах.