Есть ли способ загрузить изображения в кэш пользователя асинхронно?

Question

У меня есть список предметов.Каждый из них является квадратом с именем, и когда пользователь наводит курсор на квадрат, будет отображаться изображение, что делается с помощью jQuery.Код выглядит так:

$('.square').hover(function() {
  var link = $(this).attr('title');
  $(this).addClass('squarehover')
         .css({backgroundImage: 'url(images/' + escape(link) + '.jpg)'}); 
}, function() {
  $(this).removeClass('squarehover')
         .attr('style', '');   
});

.squarehover {
  font-size: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  -moz-background-size: 100%;
  background-position: center center;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

Если изображения не загружаются заранее, при зависании будет небольшая задержка.Кроме того, я не хочу показывать страницу после завершения загрузки всех изображений.

Поскольку изображения явно не отображаются на странице, возможно ли сначала загрузить страницу, а затем начать загружать изображения в кэш пользователя(моя идея заключается в том, что пользователь не будет сразу перемещать мышь на эти квадраты)?Как это сделать, если в HTML нет тега <img>?

Кстати, так как background-size не поддерживается в IE8, как с этим бороться?

Answer 1

Вы можете предварительно загрузить изображения следующим образом:

function preloadImages(srcs) {
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    var img;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.src = srcs[i];
        preloadImages.cache.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];

preloadImages(imageSrcs);

Просто введите URL-адреса в массиве imageSrcs и запустите его при первом запуске вашей страницы. Чем раньше вы запустите его, тем раньше будут доступны ваши изображения.

К вашему сведению, соответствующий ответ здесь: JavaScript-предзагрузчик изображений, поддерживающий события .