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