Делаем решение кроссбраузерным

В ходе тестирования в Internet Explorer обнаружилось, что если добавлять файл стилей сразу параллельно со скриптами (в функции, которая для него срабатывает по >onreadystatechange), то IE «морозит» первоначальную отрисовку страницы (т. е. показывает белый экран), пока не получит «свеженький» файл стилей. Для того чтобы Internet Explorer не занимался «замораживанием», нужно вставить фиктивную задержку следующим образом:

setTimeout('load_dynamic_css("background-images.css")',0);

В Safari же логика отображения страницы в зависимости от загружаемых файлов отличается от всех браузеров. Если в двух словах, то можно жестко определить начальный набор файлов, необходимых для отображения страницы на экране (HTML/CSS/JavaScript). А можно начать загружать все файлы в порядке приоритетности (и выполняя все их зависимости) и проверять время от времени, можно ли уже отобразить страницу (выполняя все вычисления в фоновом режиме без обновления экрана).

У Safari второй подход, поэтому ничего лучше выноса загрузки динамического CSS-файла с фоновыми картинками после срабатывания window.onload для этого браузера пока не существует. Зато первоначальная картинка в браузере появляется значительно быстрее (при большом объеме фоновых изображений).

Итак, давайте объявим функцию для создания динамического файла стилей:

/*
Объявляем функцию по динамической загрузке стилей и скриптов.
*/
function load_dynamic_css (src){
        var node = document.createElement("link");
        node = document.getElementsByTagName("head")[0].appendChild(node);
        node.setAttribute("rel", "stylesheet");
        node.setAttribute("media", "all");
        node.setAttribute("type", "text/css");
        node.setAttribute("href", src);
}
...
/* 
Далее определяем для window обработчик по событию onload.
Используем условную компиляцию для выделения IE
*/
window[/*@cc_on !@*/0 ? 'attachEvent' : 'addEventListener']
        (/*@cc_on 'on' + @*/'load',
        function(){
               setTimeout('load_dynamic_css("background-images.css")',0);
        }
,false);