7 девушек. Использование jQuery.

На этой страничке мы рассмотрим некоторые функции jQuery для элегантого отображения и скрытия графических файлов.

Чтобы использовать эти эффекты, следует их присвоить выборке jQuery.

Если коротко, последовательность действий при работе функционала этой странички следующая:

newImage.hide(); - делает предварительно новое изображение невидимым (чтобы не пугать пользователя слишком резким появлением девушки).

oldImage.fadeOut(1000,function(){$(this).remove();}); - обеспечивает медленное угасание "старой" девушки.

newImage.fadeIn(1000); - дает возможность медленно "родиться" новой.

Значения 1000 в функциях fadeOut и fadeOut - количество миллисекунд эффектов появления и исчезания. Таким образом, в нашем примере 1 секунда тратится на уход "старой" девушки и 1 секунда на появление новой.

Тексты программ на javascript-е, которые обеспечивают медленное появление и исчезновение изображений можно посмотреть и/или скачать: здесь.

Важно понимать, что технология jQuery (да и вообще javascript-инга) тесно связана с технологией CSS. Файл с используемыми стилями можно посмотреть и/или скачать: здесь.

Для улучшения понимания технологии jQuery, рекомендуем изучить следующие выпуски рассылки для вебмастеров:
153, 154, 177, 178, 179, 180, 181, 182, 183, 184, 185.

Тонкость: загрузка изображений производится предварительно.

Предварительная загрузка производится с целью избежать задержек при смене картинок пользователем и означает указание браузеру загрузить картинку в кэш рабочей станции пользователя до ее показа.

Вряд ли такое решение является слишком умным и экономичным. В конце концов, пользователь может вообще не захочет рассматривать определенную девушку, а она уже есть в его компьютере. Нехорошо. С другой стороны, лишние несколько килобайт информации (именно столько весят все картинки в сумме), это пустяки в наше время, когда процветают мультимедийные сайты, торренты и прочие трафик-обильные ресурсы.

Работает все это так.

Картинки невыбранных девушек находятся здесь:
src="images/small/girl01-60x60.jpg"
src="images/small/girl02-60x60.jpg"
src="images/small/girl03-60x60.jpg"
src="images/small/girl04-60x60.jpg"
src="images/small/girl05-60x60.jpg"
src="images/small/girl06-60x60.jpg"
src="images/small/girl07-60x60.jpg"

Предварительная загрузка производится путем смены оригинального источника изображения на источник сменяемого изображения.

var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');

В результате получаем:
src="images/small/girl01-60x60_h.jpg"
src="images/small/girl02-60x60_h.jpg"
src="images/small/girl03-60x60_h.jpg"
src="images/small/girl04-60x60_h.jpg"
src="images/small/girl05-60x60_h.jpg"
src="images/small/girl06-60x60_h.jpg"
src="images/small/girl07-60x60_h.jpg"

Тонкость: работа этой странички при отключенном JavaScript.

Некоторые, излишне умные пользователи отключают JavaScript в своих браузерах. Зачем они это делают, лучше спросить у них самих, а вот как это сделать, можно прочитать здесь: 154.

Что касается конкретно данной странички, то при выключенном JavaScript пользователь все равно сможет просматривать картинки, хотя это будет не так удобно и красиво.

А вот что касается встроенной Книги Отзывов внизу, то здесь будет такое ограничение: пользователь сможет читать чужие записи, но публиковать свои - нет.

Надеюсь, что у вас, как у большей и лучшей части пользователей Интернета JavaScript включен, а значит, вы сможете опубликовать свое мнение о том, какая девушка победит в этом мини-конкурсе красоты.

###