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

14

У меня есть ссылка, которая начинается с одного фонового изображения, а затем меняется при наведении на другое. Оба фоновых изображения установлены в CSS. Мои браузеры (любой из них), похоже, не загружают изображение при наведении, пока вы на самом деле не зависли. Но затем вы получаете пустое изображение в течение нескольких секунд (при моем очень медленном соединении), которое требуется для загрузки нового. Есть ли способ побудить браузер предварительно загрузить изображение при наведении, чтобы при наведении не происходило время задержки?

css images load-time Дэниел Бингхэм
источник

Ответы:

17

1) Используйте CSS-спрайты (это предпочтительный метод).

2) Загрузите изображения в скрытый div. Поместите изображения в div, а затем установите CSS для div, display: none;чтобы скрыть его.

3) Загрузите изображения с помощью CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Используйте этот JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>
Джон Конде
источник
Есть ли способ загрузить их после загрузки страницы? То есть пользователь не видит загрузочный круг на курсоре? Одним из способов было бы иметь скрытый фрейм, который использует javascript для задержки отображения скрытого фрейма, например, в моем вопросе stackoverflow.com/questions/13437091/…, но есть ли предпочтительный метод для задержки и не отображать круг загрузки на этом курсоре ?
воскресенье
Неважно, я нашел этот perishablepress.com/3-ways-preload-images-css-javascript-ajax, и он работает без задержек с задержкой.
Повышение против
10

Мне не очень нравится решение javascript - оно грязное, сложное в обслуживании и, конечно, полностью перестает работать, когда JS отключен.

Современное решение заключается в использовании CSS Sprites - попробуйте, поверьте мне, вы удивитесь, почему вы никогда не делали этого раньше;)

DMP
источник
0

Я нашел эту ссылку о том, как предварительно загрузить изображения с использованием чистого CSS:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

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

Шина Катрина
источник
0

Добавьте это выше вашего CSS:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Если вы идете по пути спрайта, как подсказывает DanPan, у вас все еще есть проблема с загрузкой спрайта до того, как он понадобится. Тем не менее, я люблю спрайты; чтобы легко сделать их, я использую инструмент spriteme от Стива Соудерса:

Nisse Engström
источник