Веб 2.0 начал плотно входить в умы людей, которые хотят сделать себе сайт. Как частный случай – некоторые люди просто помешаны на технологии Ajax. Требуют использовать её банально везде. Естественно можно попробовать переубедить заказчика, но если это невозможно или не к месту, то можно воспользоваться уловкой, которую я назвал “Псевдо-Ajax”.
Давайте сначала выясним, как большинство заказчиков определяют, что на странице работает Ajax?
На самом деле всего два момента, которые явно бросаются в глаза – это работа с информацией без перезагрузки страницы (смотрят на адресную строку) и крутящаяся картинка, ака лоадер. Лоадер я люблю генерировать на www.ajaxload.info
Рассмотрим частный случай второго момента. Это или загрузка больших фотографий на странице или загрузка большого количества картинок. Естественно аякс тут совсем не нужен, однако если заказчик хочет его там видеть – мы покажем.
Что для этого нужно? На самом деле не так и много. Картинка, с чётко заданными размерами и гифка лоадера. Посмотрим пошагово.
Берём тег img, указывает высоту, ширину, но не указываем адрес до картинки. Выглядит это так (на примере FF3 – но выглядит это примерно одинаково во всех нужных браузерах):
Дальше указываем у тега img адрес до картинки, которая является прозрачной гифкой нужных размеров. На фон кладём лоадер. Выглядит это так: http://absolvo.ru/tmp/9/index-2.html
Ну а теперь заменяем прозрачную гифку необходимой картинкой. Посмотреть можно тут: http://absolvo.ru/tmp/9/
Естественно, стоит учесть, что при толстом канале вы и глазом моргнуть не успеете, как картинка прогрузится. Однако если картинок будет много (галерея или список товаров), то даже на толстом канале вы всё увидите :)
Код выглядит так:
<img src=“absolvo.gif” width=“120″ height=“120″ style=“border:1px solid #e5e5e5;background:url(ajax-loader.gif) center no-repeat;” />
Ещё раз повторю ссылки:
http://absolvo.ru/tmp/9/ – демонстрация;
http://absolvo.ru/tmp/9/index-2.html – демонстрация с прозрачным гифом в роли картинки;
www.ajaxload.info – генератор лоадеров.
Ну и с выходом в полуфинал, господа :)
sloger.net
Псевдо-Ajax…
Веб 2.0 начал плотно входить в умы людей, которые хотят сделать себе сайт. Как частный случай – некоторые люди просто помешаны на технологии…