1

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]の画像では、画像の実際の画像データがプリロードされず、効果が完全に損なわれます。データは後で読み込まれ、表示する必要があるときにのみ読み込まれるようです。

これは、最後のリンクhttp://www.iill.net/wp-content/uploads/images/hot-chick.jpgが画像への直接リンクではないために発生します。そのリンクにアクセスすると、ブラウザは実際の場所にリダイレクトします。これで、Chrome でのイメージのプリロード コードは完全に機能し、効果も見栄えがよくなりました。Chrome が実際のデータ (表示される EVENTUAL 画像) をプリロードしているように見えるためです。これは、Chrome で「帯域幅の盗用を停止する」ようにリダイレクトするイメージをプリロードした場合、プリロードされるイメージは「帯域幅の盗用を停止する」ことを意味します。

Firefox が同じように動作するようにコードを変更するにはどうすればよいですか?

4

3 に答える 3

1

ul関連する画像を含む子li要素を使用することをお勧めします。ulを使用してdisplay: none（または、ページから外して）スタイルを設定するposition: absoluteと、画像は、基本的にユーザーに表示されないかどうかに関係なく、ブラウザによって読み込まれる必要があります。

現在のコードを使用してこれを行うための少し厄介な方法は、以下の関連するJSであるJSFiddleに示されています。

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でテストしただけです。

于 2011-02-26T23:35:03.070 に答える
0

ソースのないページに画像を置いて、非表示にしてみませんか。

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

次に、Javascript で画像を読み込みます。

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

次に、この img を後で div 内に配置できます。

于 2011-02-26T23:30:15.243 に答える
0

私はあなたがこの問題の間違った側にいると思います~ どの方法を採用しても、最終的に画像のホストによって反論される可能性があります. あなたが制御するホストにコピーを保存してみませんか?

そうは言っても、あなたは試すことができます

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

これにより、FireFox が画像をキャッシュする可能性があります。

于 2011-02-26T23:31:25.927 に答える