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

В ходе тестирования в 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);