Как стать автором
Обновить

Псевдо-Ajax

Разработка веб-сайтов
— Кросс-пост из моего блога
Веб 2.0 начал плотно входить в умы людей, которые хотят сделать себе сайт. Как частный случай — некоторые люди просто помешаны на технологии Ajax. Требуют использовать её банально везде. Естественно можно попробовать переубедить заказчика, но если это невозможно или не к месту, то можно воспользоваться уловкой, которую я назвал «Псевдо-Ajax».

Давайте сначала выясним, как большинство заказчиков определяют, что на странице работает Ajax?
На самом деле всего два момента, которые явно бросаются в глаза — это работа с информацией без перезагрузки страницы (смотрят на адресную строку) и крутящаяся картинка, ака лоадер. Лоадер я люблю генерировать на www.ajaxload.info
Псевдо-Ajax
Рассмотрим частный случай второго момента. Это или загрузка больших фотографий на странице или загрузка большого количества картинок. Естественно аякс тут совсем не нужен, однако если заказчик хочет его там видеть — мы покажем.
Что для этого нужно? На самом деле не так и много. Картинка, с чётко заданными размерами и гифка лоадера. Посмотрим пошагово.

Берём тег img, указывает высоту, ширину, но не указываем адрес до картинки. Выглядит это так (на примере FF3 — но выглядит это примерно одинаково во всех нужных браузерах):
Псевдо-Ajax
Дальше указываем у тега 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 — генератор лоадеров.

Ну и с выходом в полуфинал, господа :)
Теги:псевдо-ajax
Хабы: Разработка веб-сайтов
Всего голосов 77: ↑57 и ↓20 +37
Просмотры1.2K

Похожие публикации

Веб-дизайнер
от 40 000 ₽Территория РостаМожно удаленно
Веб-дизайнер
от 80 000 ₽Синергия-ИнфоМоскваМожно удаленно
Веб-разработчик
от 50 000 до 60 000 ₽CharltonsМожно удаленно
Middle fullstack разработчик PHP (Yii) / JS (AJAX, VueJS)
от 90 000 до 150 000 ₽BroniboyМожно удаленно
Веб-дизайнер
до 150 000 ₽ITSOFTМоскваМожно удаленно

Лучшие публикации за сутки