Читать «Разгони свой сайт» онлайн - страница 58
Николай Мациевский
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);
Выигрыш
При наличии у вас большого количества маленьких декоративных фоновых изображений, которые к тому же могут повторяться по различным направлениям, может быть очень удобно объединить их все в один файл и загружать его после отображения страницы на экране.
Описанная техника (кроссбраузерный data:URL плюс динамическая загрузка файлов стилей) позволяет добиться всех преимуществ технологии CSS Sprites, не затягивая загрузку страницы. При этом обладает очевидными преимуществами: не нужно лепить все картинки в один файл (их можно объединять на этапе публикации, а не на этапе разработки), можно работать с каждой совершенно отдельно, что позволяет добиться большей семантичности кода и большего удобства использования сайтов. К тому же это несколько сократит CSS-код за счет уничтожения необходимости применения background-position.
Таким образом, data:URI (в смысле влияния на скорость загрузки) равносильны CSS Sprites (или даже предпочтительнее последней, если учесть, что для повторяющихся и полупрозрачных CSS Sprites придется создавать отдельные ресурсные файлы). В смысле же простоты внедрения и разработки они отличаются в выгодную сторону: нужно лишь настроить использование общей схемы один раз в шаблонах (с учетом динамической загрузки JavaScript-файлов, которая описана в седьмой главе, это все равно придется делать) и при публикации изменения применять base64-кодирование к фоновым изображениям.
