javascript - 预加载图像，(javascript 中的源代码)

Question

好的，我之前问过如何做一个 javascript 图像悬停效果，但是该效果不允许预先加载图像。我想知道是否有人可以帮助我改进/制作新脚本来预加载请求的图像。这是代码:

$('#nav li a img').each(function() {
   var originalSrc = this.src,
       hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_hover.$1'); 

   $(this).hover(function() {
      this.src = hoverSrc;
   }, function() {
      this.src = originalSrc;
   });
});

Answer 1

你可以使用通用的...

(function() {
    var imgs = ['a.jpg', 'b.jpg'],
        imgsLength = imgs.legnth,
        index = 0,
        loadNextImage = function() {

            var image = new Image();

            image.onload = function() {
                if (index == imgsLength) {
                   return;   
                }
                index++;
                loadNextImage();
            }

            image.src = imgs[index];
        }
}();

jsFiddle .

...或者对于您的具体示例...

$('#nav li a img').each(function() {
   var originalSrc = this.src,
       hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_hover.$1'); 
       image = new Image();

   image.src = hoverSrc;

   $(this).hover(function() {
      this.src = hoverSrc;
   }, function() {
      this.src = originalSrc;
   });
});

这将在运行 JavaScript 时加载它们。它们的 load 事件没有处理程序，因此您可能希望添加一个处理程序并且在实际下载它们之前不显示悬停效果。