В этой заметке я хочу рассказать об одном нюансе, который обязательно нужно помнить при создании web интерфейса или дизайна сайта.
Часто для того, чтобы подчеркнуть, что страница реагирует на действия посетителя, используют дополнительные изображения (например, gif анимацию).
Самый распространенный пример – индикаторы загрузки. Кстати, существует бесплатный сервис, который создает такие загрузчики.
Алгоритм работы в большинстве случаев следующий:
1) посетитель нажимает на кнопку;
2) выполняется JavaScript функция, которая:
2.1) отправляет запрос серверу;
2.2) показывает загрузчик;
3) после получения ответа сервера, функция:
3.1) показывает результаты выполнения запроса;
3.2) убирает загрузчик.
И вот тут возникает проблема. Время загрузки изображения может быть соизмеримо со временем выполнения запроса. Т.е. посетитель нажмет на кнопку, а реакция на это нажатие появится через несколько секунд (в зависимости от скорости интернет канала).
Правда при повторном нажатии на кнопку задержек не будет, т.к. картинка с анимацией будет взята из кэша браузера.
Очевидно, что если картинка будет загружена в кэш до того, как посетитель нажмет на кнопку, то проблемы с задержкой не возникнет.
Самое просто решение – загружать все необходимые изображения сразу при загрузке страницы.
Для этого в конец страницы нужно вставить блок с рисунком и сделать его скрытым. Например, так:
<div class="hide"><img src="images/my_animation.gif"</div>
CSS правило, которое скрывает блок с классом hide:
.hide {
display: none;
}
Как видите, ничего сложного.
Если возникли вопросы или замечания – пишите. Постараюсь ответить 🙂
Удачи!
