— Кросс-пост из моего блога
Веб 2.0 начал плотно входить в умы людей, которые хотят сделать себе сайт. Как частный случай — некоторые люди просто помешаны на технологии Ajax. Требуют использовать её банально везде. Естественно можно попробовать переубедить заказчика, но если это невозможно или не к месту, то можно воспользоваться уловкой, которую я назвал «Псевдо-Ajax».
Давайте сначала выясним, как большинство заказчиков определяют, что на странице работает Ajax?
На самом деле всего два момента, которые явно бросаются в глаза — это работа с информацией без перезагрузки страницы (смотрят на адресную строку) и крутящаяся картинка, ака лоадер. Лоадер я люблю генерировать на www.ajaxload.info
![Псевдо-Ajax](https://habrastorage.org/getpro/habr/post_images/ce9/f2c/a38/ce9f2ca38ba6f240c32a64a717fc77fe.gif)
Рассмотрим частный случай второго момента. Это или загрузка больших фотографий на странице или загрузка большого количества картинок. Естественно аякс тут совсем не нужен, однако если заказчик хочет его там видеть — мы покажем.
Что для этого нужно? На самом деле не так и много. Картинка, с чётко заданными размерами и гифка лоадера. Посмотрим пошагово.
Берём тег img, указывает высоту, ширину, но не указываем адрес до картинки. Выглядит это так (на примере FF3 — но выглядит это примерно одинаково во всех нужных браузерах):
![Псевдо-Ajax](https://habrastorage.org/getpro/habr/post_images/5d4/90f/654/5d490f65481c9f58d6b307ca7a38454a.gif)
Дальше указываем у тега 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 — генератор лоадеров.
Ну и с выходом в полуфинал, господа :)
Веб 2.0 начал плотно входить в умы людей, которые хотят сделать себе сайт. Как частный случай — некоторые люди просто помешаны на технологии Ajax. Требуют использовать её банально везде. Естественно можно попробовать переубедить заказчика, но если это невозможно или не к месту, то можно воспользоваться уловкой, которую я назвал «Псевдо-Ajax».
Давайте сначала выясним, как большинство заказчиков определяют, что на странице работает Ajax?
На самом деле всего два момента, которые явно бросаются в глаза — это работа с информацией без перезагрузки страницы (смотрят на адресную строку) и крутящаяся картинка, ака лоадер. Лоадер я люблю генерировать на www.ajaxload.info
![Псевдо-Ajax](https://habrastorage.org/getpro/habr/post_images/ce9/f2c/a38/ce9f2ca38ba6f240c32a64a717fc77fe.gif)
Рассмотрим частный случай второго момента. Это или загрузка больших фотографий на странице или загрузка большого количества картинок. Естественно аякс тут совсем не нужен, однако если заказчик хочет его там видеть — мы покажем.
Что для этого нужно? На самом деле не так и много. Картинка, с чётко заданными размерами и гифка лоадера. Посмотрим пошагово.
Берём тег img, указывает высоту, ширину, но не указываем адрес до картинки. Выглядит это так (на примере FF3 — но выглядит это примерно одинаково во всех нужных браузерах):
![Псевдо-Ajax](https://habrastorage.org/getpro/habr/post_images/5d4/90f/654/5d490f65481c9f58d6b307ca7a38454a.gif)
Дальше указываем у тега 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 — генератор лоадеров.
Ну и с выходом в полуфинал, господа :)