預加載圖片

好吧我以前問過如何做一個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; 
    }); 
});

來源

2011-04-27 Jason

@alex你做什麼來改變格式呢？ – Jason 2011-04-27 00:14:47

有一個* code *顯示，可以進行語法高亮顯示並保留格式。該按鈕位於編輯器中，看起來像'{}'。您還可以通過4個空格縮進代碼。 – alex 2011-04-27 00:16:39

@alex試圖在我複製粘貼我的代碼時似乎沒有工作。 – Jason 2011-04-27 06:21:56

你可以使用一個通用的一個...

(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事件中沒有處理程序，因此您可能希望添加一個，並且不會顯示懸停效果，直到它們實際上已被下載。

來源

2011-04-27 00:13:07 alex

@alex現有代碼適用於此代碼的位置？ – Jason 2011-04-27 00:14:20

@Jason查看更新。 – alex 2011-04-27 00:15:43

@alex將檢查它不是我的錯，但這似乎並不奏效。 – Jason 2011-04-27 06:36:59

創建DIV並把你的翻轉/懸停圖像，它然後隱藏在div

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

這將加載圖像，而不必使用JavaScript可言，但在Opera使用這種方法的已知問題..但我用它一直工作正常。

來源

2011-04-27 00:40:58

語義理論？ – alex 2011-04-27 06:41:13

回答

相關問題