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

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

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

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

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

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

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

 Pramendra Gupta19 сент. 2010 г., 04:21
см полезную ссылку здесьcssnewbie.com/simple-jquery-stylesheet-switcher

Ответы на вопрос(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);    
}

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

 Moe19 сент. 2010 г., 16:02
Спасибо! Хаха, ты прав, что это некрасиво, но это делает работу.

Ваш ответ на вопрос