Предварительная загрузка картинок в браузер с помощью CSS

Нам нужно подгрузить картинки в кэш браузера предварительно, но мы не хотим возиться с Javascript или искать какие-то сложные пути. Решение очень просто:

Создаем div с id = “preloadImages”, который будет находиться в коде сразу после body. А затем прописываем в CSS для него вот такой стиль:

#preloadImages {
width: 0px;
height: 0px;
display: inline;
background-image: url("путь/к картинке/image1.gif");
background-image: url("путь/к картинке/image2.gif");
background-image: url("путь/к картинке/image3.gif");
background-image: url("путь/к картинке/image4.gif");
background-image: none;
}

Вот и все. Обьясню пошагово для тех кто в танке Первые три строки в стиле отвечают за то, чтобы элемент не был виден на странице. Все последующие подгружают нужные нам картинки в кэш браузера, а последняя задает для background-image свойство none, так как браузер учитывает только последнее значение.

Теперь картинки можно использовать для событий :hover, onMouseOver и так далее, без боязни пропадания картинок, так как они уже загружены в кэш.

Преимущества перед Javascript в скорости. Скрипт или сработает только когда загрузится весь документ или выполнение скрипта будет тормозить загрузку самого документа.

Проверено на IE6, IE7, Firefox 2.0. Для Интернет Эксплорера 5.5 посоветовали добавить в CSS следующую строку, так как он не поддерживает значение “0″ для элемента height:

#preloadImages {
clip: rect(0 0 0 0);
}

(проголосовали: 6, рейтинг: 3.67 из 5)

Загрузка ...

Рубрика CSS. Автор Curly Brace | 21 Январь 2007

6 Комментариев »

1 0
Все правильно, единственное, что можно не делать - не указывать единицы измерения для 0.

Комментарий by Easter — Март 20, 2007 @ 11:19 am | Цитировать
2 —2
Все правильно, единственное, что можно не делать - не указывать единицы измерения для 0.

Не согласен. Измерение нужно ставить всегда, поскольку не все браузеры понимают это правильно.

Комментарий by Tosha — Октябрь 9, 2007 @ 11:25 am | Цитировать
3 +2
Не согласен. Измерение нужно ставить всегда, поскольку не все браузеры понимают это правильно.

Нет, в CSS не нужно ставить единицы измерения для 0.

Комментарий by neutrino — Октябрь 9, 2007 @ 11:31 am | Цитировать
4 0
С чего бы это? Я всегда ставлю, например,
border: 0px solid
чтобы избежать “кривого” понимания кода тем же ie или ff. Где-то даже написано было что всегда надо ставить измерение…

Комментарий by Alexander v. J — Январь 19, 2008 @ 12:49 pm | Цитировать
5 +3
К сожалению метод групый, так как умные браузеры не будут выкачивать все картинки. Каждое последующее обявление “background-image” будет заменять собой предыдущее. В итоге загрузится самая последняя картинка (image4).

Комментарий by Илья — Февраль 7, 2008 @ 7:14 pm | Цитировать
6 +4
К сожалению метод групый, так как умные браузеры не будут выкачивать все картинки. Каждое последующее обявление “background-image” будет заменять собой предыдущее. В итоге загрузится самая последняя картинка (image4).

99% Т.к. в данном css последнее определение - background-image: none;
Поэтому вообще ничего не будет загружаться (проверял в FF).

Комментарий by grank — Февраль 26, 2008 @ 10:34 pm | Цитировать