Незаметная загрузка картинок

Владимир | | CSS, HTML, Web дизайн, Web разработка.

image loading

В этой заметке я хочу рассказать об одном нюансе, который обязательно нужно помнить при создании 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;
}

Как видите, ничего сложного.

Если возникли вопросы или замечания – пишите. Постараюсь ответить 🙂

Удачи!

  • andead

    Opera не грузит картинки если у контейнера свойство display равно none

    вот ещё несколько способов: http://cssing.org.ua/2005/09/27/preload-by-css/

    • Спасибо, очень интересная статья.
      Насчет оперы я, честно говоря, не знал.
      В принципе сделать картинку невидимой можно и по-другому: установить для блока абсолютное позиционирование и убрать его за пределы экрана (left: -1000px)

  • andead

    Opera не грузит картинки если у контейнера свойство display равно none

    вот ещё несколько способов: http://cssing.org.ua/2005/09/27/preload-by-css/

    • Спасибо, очень интересная статья.
      Насчет оперы я, честно говоря, не знал.
      В принципе сделать картинку невидимой можно и по-другому: установить для блока абсолютное позиционирование и убрать его за пределы экрана (left: -1000px)

  • Скажите а можно ли ускорить загрузку рисунков без предзагрузки

    • Можно, если увеличить скорость интернет-канала 🙂
      А если серьезно, можно объединить несколько картинок в одну. Одна большая картинка будет грузиться быстрее, чем 2 маленьких.

      • Кстати, именно это (объединение нескольких картинок в одну) обычно используется для ролл-оверов и прочих CSS-эффектов.
        При некоторой сноровке (и отсутствии repeat-ов у картинок) можно одну картинку использовать для почти всех картинок на сайте 🙂

        • Это подходит только для статичных картинок. Объединить две gif анимации в одну будет сложно.

  • Скажите а можно ли ускорить загрузку рисунков без предзагрузки

    • Можно, если увеличить скорость интернет-канала 🙂
      А если серьезно, можно объединить несколько картинок в одну. Одна большая картинка будет грузиться быстрее, чем 2 маленьких.

      • Кстати, именно это (объединение нескольких картинок в одну) обычно используется для ролл-оверов и прочих CSS-эффектов.
        При некоторой сноровке (и отсутствии repeat-ов у картинок) можно одну картинку использовать для почти всех картинок на сайте 🙂

        • Это подходит только для статичных картинок. Объединить две gif анимации в одну будет сложно.

  • Pingback: Мир CSS» Blog Archive » Быстрая подзагрузка картинок()

  • На подгрузку изображений это очень юзабильно. Можно такое постаить и на текст, но не советую из за ПС, хотя было бы очень юзабильно.

  • На подгрузку изображений это очень юзабильно. Можно такое постаить и на текст, но не советую из за ПС, хотя было бы очень юзабильно.

  • А если картинка у нас в CSS прописана бэкграундом у div, который по умолчанию имеет display:none. Когда блок у нас отображается, в этот момент картинка-бэкграунд только начинает подгружаться. Как ее загрузить сразу?

    • Можно сделать дополнительно невидимый тег img и загружать в него ту же самую картинку.

  • А если картинка у нас в CSS прописана бэкграундом у div, который по умолчанию имеет display:none. Когда блок у нас отображается, в этот момент картинка-бэкграунд только начинает подгружаться. Как ее загрузить сразу?

    • Можно сделать дополнительно невидимый тег img и загружать в него ту же самую картинку.

  • Приглашаю всем обсуждать css тут.

  • Пишу width=»0" и height=»0" для картинок перед роловерами. Все клево.

  • Пишу width=»0" и height=»0" для картинок перед роловерами. Все клево.

  • Спасибо, сейчас как раз реализовываю подгрузку изображений. Смысл в том, чтобы страничка визуально загрузилась, и только после этого началась скрытая загрузка графики для галереи.

    • Виктор

      Как раз сейчас тоже с этим сражаюсь!Смысл в том что хочу сделать подгрузку изображений после полной загрузки страницы,потому как выполняю JS дополнительный запрос на известный сервер(соединяюсь с ним) а если картинка загрузиться раньше JS то смысла нет всему сайту(задумке).Подскажите кто может знает как такую штуку реализовать!

  • Спасибо, сейчас как раз реализовываю подгрузку изображений. Смысл в том, чтобы страничка визуально загрузилась, и только после этого началась скрытая загрузка графики для галереи.