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>标记，该怎么做？

BTW，因为IE8不支持background-size，如何处理？

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);

只需填写imageSrcs数组中的网址，然后在首次运行网页时运行此网址。越早运行它，图像就越早可用。

仅供参考，这是一个相关答案：Image preloader javascript that supports events。

有没有办法异步加载图像到用户的缓存？

1 个答案: