Попереднє завантаження зображень в CSS необхідна тоді, кодга потрібно відобразити картинку, тільки після певної дії користувача, а не відразу, по завантаженню HTML-документа. Наприклад, мінливий зображення (фон) пункту меню, при наведенні на нього покажчика миші. Проблема полягає в тому, що браузер завантажує приховані зображення, тільки після дії користувача. Чим більше довантажувати зображення і повільніше з'єднання клієнта з сервером, тим тривалішим буде пауза, перед появою фонової картинки. Код css, який буде відображати зображення з затримкою, наведено нижче. Для експерименту, використовуйте зображення menu_bg.gif, menu_bg_hover.gif розміром в декілька МБ, тоді добре буде помітний "ефект" паузи.
Приклад меню, коли при наведенні на один з його пунктів, зображення для цього дії з'являється з затримкою:
Слід врахувати, що після перезавантаження сторінки, зображення, котре з'являється при наведенні миші на пунк меню, може залишитися в кеші браузера і ефект затримки видно не буде.
Попередня подгрузка зображень в CSS:
Для вирішення цього завдання, потрібно додати такий рядок в CSS файл:
n7_img_preload # 123;
width. 0px;
height. 0px;
display. inline;
background-image. url # 40; http. // obovsem .org .ua / img / menu_bg_hover2.gif # 41; ;
/ * Інші зображення для попереднього завантаження * /
# 125;
І в коді HTML-документа, в будь-якій частині між
. записати такий тег:Приклад меню, коли при наведенні на один з його пунктів, зображення для цього дії з'являється без затримки:
Використання суміщених зображень
Щоб позбутися від попередньої подгрузки зображення засобами CSS, можна скористатися варіантом, коли одна картинка містить 2 зображення. При наведенні миші на пункт меню, необхідно просто змінити, за допомогою CSS, положення фонового зображення.
Приклад меню, коли при наведенні на один з його пунктів, зображення для цього дії зберігається в одному файлі з головною картинкою:
Приклад організації зміщення фону каринки. з використанням CSS. наведено нижче:
HTML-код посилання на цю сторінку: