Як попередньо завантажити зображення, які використовуються лише на наведення курсора?

14

У мене є посилання, яке починається з одного фонового зображення, а потім змінюється на наведення курсору на інше. Обидва фонові зображення встановлені в CSS. Мої браузери (будь-які з них), здається, не завантажують зображення наведення курсору, поки ви фактично не наведіть на нього курсор. Але тоді ви закінчуєтеся порожнім зображенням на кілька секунд (на моєму дуже повільному з’єднанні), щоб завантажити нове. Чи є спосіб заохотити браузер попередньо завантажити зображення, що наводить курсор, щоб час затримки не виникав при наведенні?

css images load-time

— Даніель Бінгем
джерело

17

1) Використовуйте спрайти CSS (Це кращий метод).

2) Завантажте зображення в прихований роздільник. Помістіть зображення у 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, і він працює бездоганно із затримкою у часі.

— riseagainst

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" />

Якщо ви рухаєтеся по спрайт-маршруту так, як danp пропонує, у вас все ще виникає проблема з завантаженням спрайту, перш ніж це буде потрібно. Це сказало, що я люблю спрайтів; щоб легко зробити їх, я використовую інструмент spriteme від Steve Souders:

— Nisse Engström
джерело