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事件中没有处理程序，因此您可能希望添加一个并且不显示悬停效果，直到它们实际上已被下载。

Answer 2

创建div并将翻转/悬停图像放入其中，然后隐藏div

<div style="display:none">
    <img src="" />
    <img src="" />
    etc..
</div

这将加载图像而不必使用javascript，但Opera使用此方法存在一个已知问题..但我一直使用它工作正常。

预加载图片，（来源于javascript）

2 个答案: