На практике. На практике все оказалось не сильно сложнее

На практике все оказалось не сильно сложнее. Мы загружаем в head страницы (до вызовов любых внешних файлов) наш «легкий» CSS:

а затем добавляем в комбинированный обработчик window.onload (подробнее о нем рассказывается в седьмой главе) создание нового файла стилей, который дополняет уже загрузившуюся страницу фоновыми изображениями:

function combinedWindowOnload() {

load_dynamic_css("background‑images.css");

...

}

В результате мы имеем максимально быстрое отображение страницы, а затем стадию пост‑загрузки, которая вытянет с сервера все дополнительные картинки (тут уже сам браузер постарается), стилевые правила и скрипты.

А доступность?

Внимательные читатели уже заготовили вопрос: а что, если у пользователя отключен JavaScript? Тут всё должно быть просто: мы добавляем соответствующий <noscript> для поддержки таких пользователей. С маленьким нюансом: <noscript> не может находиться в <head>, а <link> не может находиться в <body>. Если мы соблюдаем стандарты (все же иногда лучше довериться профессионалам и не ставить браузеры в неудобное положение, когда они встретятся с очередным отклонением от спецификации), то стоит искать обходные пути.

После небольших экспериментов было выделено следующее изящное решение, обеспечивающее работу схемы во всех браузерах (замечание: после многочисленных экспериментов было решено остановиться на HTML‑комментариях – они оказались наилучшим способом запретить загрузку указанного CSS‑файла):

/* если мы сможем создать динамический файл стилей */

if (document.getElementsByTagName) {

/* то добавляем в загрузку облегченную версию */

document.write('\x3clink href="light‑light.css"

rel="stylesheet" type="text/css" media="all"/>');

/* после этого начинаем HTML‑комментарий */

document.write('\x3c‑‑');

}

</script>

<!‑‑[if IE]><![endif]‑‑>

В результате браузер с включенным JavaScript запишет начало комментария, а закроет его только после <link> (комментарии не могут быть вложенными). При выключенном JavaScript <script> не отработает, <link> обработается и добавится в очередь загрузки, а последний комментарий будет просто комментарием.

<49 50 515253 54 55 >

Дата добавления: 2015-05-19; просмотров: 784;