блоки javascript появляются по кругу

background: (path-to/popup-back.png);

[...] <!-- опускаю остальные элементы, они к примеру отношения не имеют -->

<div id="contactsPopUp">

<div id="showContacts">Показать контакты</div>

Поставим себе простую задачу с показом блока по клику на элементе, знаем о проблеме, которая возникнет при показе блока, будем ее героически преодолевать:

Все очень просто, но и подходит далеко не для всех случаев, особенно, если вспомнить про проблему со скрытыми блоками.

background-position: 0 -25px; /* смещаем фон согласно подготовленной картинки */

background: url(path-to/button-with-rollover.png); /* склеенная картинка для двух состояний кнопки */

И так, при наведении на объект нам нужно сменить ему картинку. Если объект имеет фиксированные размеры (width и height) или хотя бы только высоту, мы можем легко избавиться от второй отдельной картинки, воспользовавшись техникой CSS спрайтов, а это в свою очередь устранит косяк:

Решение 1 — подходит для rollover эффекта

При наведении на кнопку у нее меняется фон на другое изображение. Но при этом button-over.png не загрузится вместе со страницей, а начнет загружаться только когда пользователь наведет на кнопку. Пока к серверу дойдет запрос, пока тот ответит, пока загрузится картинка пользователь будет наблюдать кнопку без фона. Будем от этого избавляться.

background: url(path-top/button-over.png);

background: url(path-to/button.png);

Аналогичная ситуация, если элемент меняет фоновый рисунок при каком-то событии. Например, часто встречается смена вида кнопки (фонового изображения) при наведении — так называемый rollover эффект:

Блоки, которые появляются, при загрузке страницы скрыты. Обычно с помощью : none. Беда в том, что фоновые изображения и картинки в скрытых блоках при загрузке странциы не загружаются, а начинают загружаться при появлении скрытого блока. В итоге пользователь некоторое время наблюдает какое-то недоразумение (смотри видео):

Встречаются задачи, когда на веб странице что-то всплывет, выскакивает или еще каким-то образом появляется. Или же другая ситуация — при наведении на элемент он меняет свой вид (например, при наведении на кнопку).

Дата публикации: 19.12.2009

Подготовил: Евгений Рыжков

Предварительная загрузка изображений

Предварительная загрузка изображений