Зачем использовать предварительную загрузку? Многие сайты используют изображения для пунктов меню. Когда вы наводите курсор на элемент меню, его изображение меняется. Иногда это происходит не сразу, а через несколько секунд. Происходит это потому что браузер не загружает изображения, появляющиеся при наведении курсора, при загрузке всей страницы. Загрузка происходит именно после наведения. Вот тут нам и поможет предварительная загрузка.
Начнем с этого CSS кода:
ul{ margin: 0; padding: 0; list-style-type: none; font: 13px ‘Lucida Grande’, Arial, sans-serif; } ul li{ display: inline; } ul li a{ display:block; width:120px; text-decoration: none; padding: 0.3em 1em; color: #000; background:url(images/link.gif); } ul li a:hover{ width:120px; background:url(images/hover.gif); }
HTML:
<ul> <li><a href="http://www.divitodesign.com">Главная</a></li> <li><a href="http://www.divitodesign.com">Статьи</a></li> <li><a href="http://www.divitodesign.com">Блог</a></li> <li><a href="http://www.divitodesign.com">Контакты</a></li> </ul>
Теперь добавим сам загрузчик, пропишите следующий код перед </body>
<div class="loader"></div>В качестве фона этого блока мы используем изображение, которое необходимо предварительно загрузить. Для этого добавим в css следующее:
.loader{ background:url(images/hover.gif); margin-left:-1000px; }
Таким образом этот блок будет расположен за пределами видимой части браузер, а изображение будет загружено.
Если необходимо загрузить несколько изображений, просто добавьте необходимое количество свойств background.
.loader{ background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; background:url(images/hover4.gif) no-repeat; margin-left:-1000px; }
Теперь вы можете использовать предварительную загрузку без использования Javascript!
Оригинал: Create an image pre-loader with CSS
Loading ...
В случае динамической смены изображений более удобно использовать одно изображение, которое будет совмещать оба состояния, а в CSS менять положение этого изображения.
Спасибо, интересный вариант
Согласен с мнением monIToringe. Я бы предпочел совмещать разные состояния в одном изображении.
Ссылочку бы тогда ещё сразу подкинули на счёт варианта с одной картинкой и разным смещением в CSS , было бы вообще прекрасно
А автору риспект!
2 ACID Jesus – да легко
http://www.habrahabr.ru/blog/webdev/24199.html
Лично мне этот вариант не очень нравится. Я предпочитаю подгружать все необходимые изображения так:
.loadimages
{
display: none;
}
AJAX, не все браузеры сразу подгрузят такую картинку.
Можно и не добавлять лишний тег, а просто прописать background через hover на любою ссылку
Внешне красивый метод, но я тестировал его еще несколько месяцев назад и он нифига не работал, что вполне логично, браузер сначала парсит CSS, а только потом подгружает необходимые ресурсы, в данном случае это только последнее из указанных изображений.
[...] Предварительная загрузка изображений с помощью CSS Зачем использовать предварительную загрузку? Многие сайты используют изображения для пунктов меню. Когда вы наводите курсор на элемент меню, его изображение меняется. Иногда это происходит не сразу, а через несколько секунд. Происходит это потому что браузер не загружает изображения, появляющиеся при наведении курсора, при загрузке всей страницы. Загрузка происходит именно после наведения. Вот тут нам и поможет предварительная загрузка. Популярность: 7% [...]
Совместила с другим вариантом – не знаю – будет ли поддержка такого во всех браузерах?
Как думаете?
.loader {
background:url(images/hover.gif) no-repeat;
background-image: none;
clip: rect(0 0 0 0);
}
clip работает только для абсолютно позиционированных элементов.
Друзья, это всё фигня, что вы тут пишете, да и само понятие предварительной загрузки – атавизм. Профессионалы вроде меня скорее всего дотумкали давно уже до того, как это правильно делать. Не нужны ни скрипты, ни CSS, да и вообще ничего не нужно. Как это делается не скажу, но подскажу: нужно просто показать все изображения – и активное (при наведении мыши), и пассивное, а также ещё одно – пустое, прозрачное.
Всё решается при помощи небольшого кувырка с переподвыподвертом, но – кувырка, работающего везде и без проблем. Думайте.
Михаил, ваш ЧСВ зашкаливает за потолок. Лутший и проф вариант, это склеить обе картинки в одну, и в ксс писать позицию(кординаты).
склеила бы..если бы исходная не была jpg а при событии hover – gif:(
интересный вариант, наверно действительно он полезен только при случае julie
не понятно только зачем еще один узел
использовать любой класс
.some {
background-position:-100px -100px;
…
}
.loader{background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
margin-left:-1000px;
}
А зачем прописан margin, если div пустой?
Его и так не будет видно, потому что он «схлопнется» без объектов внутри него или без указания его размеров.
Изменение координат фонового изображения – это конечно хорошо, но если это фоновое изображение полупрозрачный png способ с преподгрузкой спасает!
А зачем, собственно, марджинить этот слой на 1000 пикселей вправо? Разве нет мониторов с разрешением 1600х1200? Не совсем грамотно. А вот что я сделал:
.preload {
height: 10px; width: 10px; background: url('fon_focus.png'); position: absolute; top: -500px;
background: url('hover.png');
}
Разве не лучше его изгнать вверх на 500пикселей и задать фикс размеры 10х10 с абсолютным позиционированием?
И ещё кое-что: Опера подгружает только последний указанный в CSS рисунок, игнорируя остальные верхние. Так что лучше для каждого рисунка сделать свой div.