Незаметная загрузка картинок
В этой заметке я хочу рассказать об одном нюансе, который обязательно нужно помнить при создании 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;
-
}
Как видите, ничего сложного.
Если возникли вопросы или замечания – пишите. Постараюсь ответить 
Удачи!
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Опубликовано в CSS, HTML, Web дизайн, Web разработка
Комментарии (8)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Opera не грузит картинки если у контейнера свойство display равно none
вот ещё несколько способов: http://cssing.org.ua/2005/09/27/preload-by-css/
Спасибо, очень интересная статья.
Насчет оперы я, честно говоря, не знал.
В принципе сделать картинку невидимой можно и по-другому: установить для блока абсолютное позиционирование и убрать его за пределы экрана (left: -1000px)
Скажите а можно ли ускорить загрузку рисунков без предзагрузки
Можно, если увеличить скорость интернет-канала
А если серьезно, можно объединить несколько картинок в одну. Одна большая картинка будет грузиться быстрее, чем 2 маленьких.
Кстати, именно это (объединение нескольких картинок в одну) обычно используется для ролл-оверов и прочих CSS-эффектов.
При некоторой сноровке (и отсутствии repeat-ов у картинок) можно одну картинку использовать для почти всех картинок на сайте
Это подходит только для статичных картинок. Объединить две gif анимации в одну будет сложно.
[...] Подсмотрено здесь [...]
На подгрузку изображений это очень юзабильно. Можно такое постаить и на текст, но не советую из за ПС, хотя было бы очень юзабильно.