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つのイメージのために適切にこの配列の作品を使用してやっていることを転換効果が、最後の1、imageArray[3]ため、画像の実際の画像データはプリロードされず、実際の画像データはAFTERWARDSをロードするので、表示する必要があるときにのみ、その効果を完全に失う。

これは、最後のリンクhttp://www.iill.net/wp-content/uploads/images/hot-chick.jpgが画像への直接リンクではないために発生します。あなたがそのリンクに行くと、あなたのブラウザはあなたをACTUALの場所にリダイレクトします。今、Chromeの画像プリロードコードが完璧に機能し、エフェクトが素晴らしいようになりました。 Chromeは実際のデータをプレロードするように見えるため、表示される予定の画像です。これは、Chromeで「私の帯域幅を奪うのを止める」にリダイレクトされる画像をプリロードした場合、プリロードされる画像が「私の帯域幅を盗むのを止める」ことを意味します。

Firefoxを同じように動作させるためにコードを変更するにはどうすればよいですか？

Answer 1

なぜあなたは、ソースなしでページ上の画像を入れて、それを隠さない：

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

を今、あなたのJavaScriptで、読み込む画像：

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

を次にあなたがすることができます後でこのimgをdivの中に入れてください。

Answer 2

私はあなたがこの問題の反対側にいると思っています〜あなたが採用している方法は、最終的にイメージのホストによって反論されるかもしれません。 あなたが管理しているホストにコピーを保存してみませんか？あなたはFirefoxが画像をキャッシュするために得ることができます

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

を試みることができる、と述べた

。

Answer 3

私はulに関連する画像を含む子供liの要素を使用することをお勧めします。 ulをdisplay: none（あるいは、ページ外にはposition: absolute）と書いてください。画像は、本質的にユーザーには見えないにもかかわらず、ブラウザーによって読み込まれます。あなたの現在のコードで、それを行うの

A少し厄介な方法は、関連するJSの下、JS Fiddleに示されている：明らか

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を隠していませんが、デモのが表示​​するように動的に作成する方法の1つです。確かに、私はこれまでChromeでテストしてきました。