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

Preloading Image, (source in javascript)

本文关键字：javascript 源代码 加载 图像      更新时间：2023-09-26

我之前问过如何做一个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;
   });
});

你可以使用一个通用的…

(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事件上没有处理程序，所以您可能希望添加一个并且在它们实际上被下载之前不显示悬停效果。

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

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

这将加载图像，而不必使用javascript，但有一个已知的问题与Opera使用这种方法。但是我一直用它，效果很好

相关文章：