如何讓Mozilla Firefox預載最終的圖像結果？

Question

我正在嘗試使用JavaScript預加載圖像。我宣佈一個陣列，來自不同地方的圖​​像鏈接如下：

var imageArray = new Array(); 
imageArray[0] = new Image(); 
imageArray[1] = new Image(); 
imageArray[2] = new Image(); 
imageArray[3] = new Image(); 
imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg"; 
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg"; 
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg"; 
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg"; 

圖像褪色和變換效果，我用這個陣列正常工作的第3個圖像做，但最後一個，imageArray[3]，圖像的實際圖像數據沒有預先加載，並且完全破壞了效果，因爲實際的圖像數據僅在需要顯示時加載AFTERWARDS。

發生這種情況是因爲最後一個鏈接http://www.iill.net/wp-content/uploads/images/hot-chick.jpg不是圖像的直接鏈接。如果您轉到該鏈接，您的瀏覽器會將您重定向到ACTUAL位置。現在，我在Chrome中的圖像預加載代碼工作得非常好，效果看起來很棒。因爲Chrome似乎會預先載入實際數據 - 即將顯示的EVENTUAL圖像。這意味着在Chrome中，如果我預裝了一個將重定向到「停止竊取我的帶寬」的映像，那麼預加載的映像就是「停止竊取我的帶寬」。

我該如何修改我的代碼才能使Firefox的行爲方式相同？

Answer 1

你爲什麼不把一個圖像在頁面上沒有來源，隱藏：

<img src='' id='preLoadImage1' style='display: none' /> 

現在，在你的JavaScript，加載圖像：

document.getElementById('preLoadImage1').src = ''; 

然後你就可以稍後將此img放入div中。

Answer 2

我認爲你在這個問題上有錯誤的一面〜無論你採用什麼方法最終都會被圖像的主機所抵制。 爲什麼不將副本保存到您控制的主機？

這就是說，你可以嘗試

<img src="hotlink" style="visibility:hidden;position:absolute;margin-top:-1000px;" /> 

這可能讓FireFox的緩存圖片。

Answer 3

我建議使用ul與孩子li元素包含相關的圖像。將ul與display: none（或者，可選地，position: absolute它不在頁面上）相匹配，並且圖像仍然應該由瀏覽器加載，而不管它們對於用戶來說基本上是不可見的。

一個這樣做，與您當前密碼的稍顯凌亂的方式，在JS Fiddle所示，相關JS如下：

var imageArray = new Array(); 
imageArray[0] = new Image(); 
imageArray[1] = new Image(); 
imageArray[2] = new Image(); 
imageArray[3] = new Image(); 

imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg"; 
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg"; 
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg"; 
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg"; 

// the below stuff is the new: 

var newList = document.createElement('ul'); 
newList.setAttribute('id', 'imgPreload'); 

var preload = document.getElementById('preload'); 
preload.appendChild(newList); 
var imgPreload = document.getElementById('imgPreload'); 

var li = document.createElement('li'); 

for(i=0; i<imageArray.length; i++){ 
    imgPreload.appendChild(li).appendChild(imageArray[i]); 
} 

顯然，上述不隱藏創建ul，但演示的顯示一種動態創建它的方法。無可否認，我也只是到目前爲止在Chrome中進行了測試。