Объединенный Открытый Проект - Сайт для Настоящих Компьютерщиков

Объединенный Открытый Проект

Сайт для Настоящих Компьютерщиков

; Логин:
  Пароль:
Обычный
Безопасный
Запомнить пользователя



Зарегистрироваться
Забыли пароль?
 
 
 
Объединенный Открытый Проект »   Дизайн, HTML, CSS, JavaScript »   Предварительная загрузка картинок для наложения (rollover)
RSS

Предварительная загрузка картинок для наложения (rollover)

Готовое решение

Текущий рейтинг темы: Нет

<<Назад  Вперед>>Модератор: GramПечать
 
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
4X_Pro
Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79





Дата регистрации на форуме:
29 сен. 2001
Очень часто при создании сайтов используется эффект наложения изображения при наведении курсора мыши на него. Хотя на первый взгляд, он реализуется предельно просто — замена this.src при наступлении событий onmouserover и onmouseout, но это создает один весьма неприятный эффект: подгрузка изображения с сервера может занять достаточно существенное время (1-2 секунды), что некоторых пользователей почему-то раздражает.

Решается эта проблема следующим образом: подгрузка изображений производится в фоновом режиме зараннее (лучше всего — по событию onLoad), и изображение хранится в кеше броузера. Для универсального решения такой задачи я написал следующий код:
[nocode]
<script type="text/javascript">
var imgs = document.images;
function preload() {
if (imgs) { var count = imgs.length; }
else { var count=0; }
var i=0;
for (i=0; i<count; i++) {
if (imgs.name!='') {
imgs[imgs.name+'_over'] = new Image(imgs.height,imgs.width);
imgs[imgs.name+'_over'].src=imgs[imgs.name].src.replace(/\.(.*?)$/,"_over.$1");
}
}
}
function on(pic) {
pic.src=imgs[pic.name+'_over'].src;
}
function off(pic) {
pic.src=pic.src.replace(/_over\.(.*?)$/i,".$1");
}
</script>
[/nocode]
Код точно работает в MSIE 6, FireFox 1.5, Opera 9. Изображение должно обязательно иметь аттрибут name (это сделано для того, чтобы отделить изображния, являющиеся ссылками/кнопками, от изображений — элементов дизайна), а картинка, появляющееся при наведении — иметь то же имя, но с добавлением _over перед расширением (например, b1.gif и b1_over.gif).

Для корректной работы скрипта нужно повесить вызов функции preload на событие onLoad:
<body onLoad="preload()">
и задать события для самого изображения: <img src="buttons/b1.gif" alt="" onmouseover="on(this)" onmouseout="off(this)">

---
Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
wsx
Участник Проекта
Юниксойд, сетевик
wsx
Откуда: Казань
Всего сообщений: 1074
Рейтинг пользователя: 28

Репутация пользователя: 1




Дата регистрации на форуме:
14 янв. 2005
о! как раз нужно :) Спасиб :)
<<Назад  Вперед>>Модератор: GramПечать
Объединенный Открытый Проект »   Дизайн, HTML, CSS, JavaScript »   Предварительная загрузка картинок для наложения (rollover)
RSS
Быстрый переход в раздел:


Время выполнения скрипта: 0.0774. Количество выполненных запросов: 17, время выполнения запросов 0.0508