Приведенный выше фрагмент разметки, воспроизводящий эффект смены изображений, не выполняет предварительную загрузку изображений, поэтому пользователь может заметить задержку при смене изображения, когда первый раз наведет на него указатель мыши. Чтобы исправить ситуацию, необходимо немного изменить разметку:
Только что продемонстрированный фрагмент содержит один элемент
<script>
и два атрибута обработчиков событий с JavaScript-кодом для реализации единственного эффекта смены изображений. Это прекрасный пример навязчивого Java-Script-кода: объем программного кода достаточно велик, чтобы осложнить чтение разметки HTML. В примере 21.1 приводится ненавязчивая альтернатива, позволяющая выполнять смену изображений простым добавлением атрибута
data-rollover
(раздел 15.4.3) к любому элементу
<img>.
Обратите внимание, что в этом примере используется функция
onLoad
из примера 13.5. В нем также используется массив
document.images[]
(раздел 15.2.3), в котором хранятся ссылки на все элементы
<img>
в документе.
Пример 21.1. Ненавязчивая реализация эффекта смены изображений
* Обратите внимание, что для работы этого модуля необходимо подключить onLoad.js
*/
onLoad(function { // Все в одной анонимной функции: не определяет имен
// Цикл по всем изображениям, отыскивает атрибут data-rollover
for(var і = 0; і < document.images.length; i++) {
var img = document.images[i];
var rollover = img.getAttribute("data-rollover");
if (!rollover) continue; // Пропустить изображения без data-rollover
// Обеспечить загрузку сменного изображения в кэш
(new Image).src = rollover;
// Определить
атрибут для сохранения URL-адреса
// изображения по умолчанию
img.setAttribute("data-rollout", img.src);
// Зарегистрировать обработчики событий,
// создающие эффект смены изображений
img.onmouseover = function {
this.src = this.getAttribute("data-rollover");
};
img.onmouseout = function {
this.src = this.getAttribute("data-rollout");
};
}
});
21.2. Работа с аудио- и видеопотоками
Стандарт HTML5 определяет новые элементы
<audio>
и
<video>,
которые теоретически так же просты в использовании, как элемент
<img>
. В броузерах с поддержкой стандарта HTML5 больше не нужно использовать дополнительные расширения (такие как Flash), чтобы внедрить в свои HTML-документы аудио- и видеоклипы:
<audio src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>
Однако на практике работать с этими элементами несколько сложнее, чем было показано выше. Производители броузеров не смогли прийти к соглашению о стандарте на аудио- и видеокодеки, которые поддерживались бы всеми броузерами, вследствие чего обычно приходится использовать элементы
<source>,
чтобы указать несколько источников мультимедийных данных в различных форматах:
не имеют содержимого: они не имеют закрывающего тега </source>, и от вас не требуется завершать их последовательностью символов
/>
.
Броузеры, поддерживающие элементы
<audio>
и
<video>,
не будут отображать их содержимое. Тогда как броузеры, не поддерживающие их, отобразят это содержимое. Чтобы решить эту проблему, можно вставить внутрь содержимое для обратной совместимости (например, элемент