- Крос-пост з мого блогу
Веб 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 - генератор лоадерів.
Ну і з виходом у півфінал, панове:)
