предварительно загрузить изображения с фоновыми изображениями CSS? - PullRequest
Новая
       29

предварительно загрузить изображения с фоновыми изображениями CSS?

6 голосов
/ 25 августа 2011

существует простой известный способ предварительной загрузки изображений с фиксированным положением div вне области просмотра, в котором хранятся некоторые изображения.

Действительно ли это то же самое, что просто использовать свойство background в css и применитьнесколько изображений в div без содержимого?

вроде бы так? 

<div id="preload"></div>

#preload {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center;
}

Будет ли это на самом деле работать?Или последнее свойство фона перезаписывает другие объявления?

Возможно ли в CSS3 несколько фонов?

Ответы [ 3 ]

2 голосов
/ 25 августа 2011

Когда вы разделяете фоновые изображения запятыми следующим образом: background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); Это должно работать.Я не знаю, работает ли это с `background: ´.Просто попробуйте.

1 голос
/ 25 августа 2011

Вы можете поместить несколько фонов в один элемент с помощью css3. http://www.css3.info/preview/multiple-backgrounds/

Если вы хотите, чтобы это работало, т.е. тоже ... вы хотите сделать это <img> способом.

Также один хороший способ - поместить несколько изображений в документ с одним изображением и применить его в качестве фонового изображения для разделения элементов и использовать background-position: -20px 0px;, чтобы определить положение, в котором находится это конкретное изображение. Это приводит к тому, что все эти изображения в этом документе загружаются в то же время, что и в одном документе.

Используя этот способ, вам нужно загрузить только один <img> или background и получить несколько загруженных изображений.

0 голосов
/ 01 ноября 2013

В Chrome и IE это отлично работает для меня, чтобы предварительно загрузить изображения и поменять их местами при наведении курсора.Div "preload" не имеет высоты / ширины, так как изображения установлены на фон, поэтому он не отображается на странице, и изображения готовы, когда вы хотите поменять их местами при наведении.(вам, очевидно, придется установить высоту / ширину якорей. Я просто показываю здесь минимальный CSS, чтобы прояснить ситуацию)

HTML: 

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="social-button-1"></a>
    <a href="http://..." class="social-button-2"></a>
    <a href="http://..." class="social-button-3"></a>
</div>

CSS: 

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');}
.social-button-1 {background: url('images/pic1a.png');}
.social-button-2 {background: url('images/pic2a.png');}
.social-button-3 {background: url('images/pic3a.png');}
.social-button-1:hover {background: url('images/pic1b.png');}
.social-button-2:hover {background: url('images/pic2b.png');}
.social-button-3:hover {background: url('images/pic3b.png');}
...