1

画像をプリロードするためにJavaScriptで画像配列を作成しています。このコードは次のようになります。

imageArr[0]=new Image();        
imageArr[0].src='mypath/myimgname.jpg'; 
imageArr[1]=new Image();        
imageArr[1].src='mypath/myimgname.jpg'; 
imageArr[2]=new Image();        
imageArr[2].src='mypath/myimgname.jpg';

次に、必要に応じてコードでこの要素を使用しています。各ページの開始時にこの配列を宣言します。この種の 150 個の大きなサイズの画像が各ページに必要です。

だから私の質問は、各ページにこのコードを書いているのでです。各ページに何度も画像をロードしますか。または、ブラウザに画像を一度だけロードします。その後、この配列を 2 ページ目に再度書き込んでいます。次に、ブラウザにあるものを使用するだけです。または、サーバーから画像を何度も取得していますか?

このアプローチが間違っている場合、これに対する正しいアプローチは何ですか?

4

4 に答える 4

2

画像（jpg）はブラウザのキャッシュに残りますが、ページを変更したときにimageArrはJavascriptスコープに含まれなくなります（私が想像するように、グローバルコンテキストでその配列を定義した場合）。したがって、毎回再初期化する必要があります。私はあなたのアプローチに何も悪いことは見ていませんが、あなたが何を手に入れたいのか正確にはわかりません。

于 2012-09-28T16:41:56.880 に答える
2

jqueryを使用している場合は、waitforimagesプラグインを使用することをお勧めします。

しかし、あなたのアプローチは間違っていません、それはより単純であり、写真はまだキャッシュから取られています

于 2012-09-28T16:44:06.870 に答える
1

Dena... 私は常にこの方法を使用して画像を事前にキャッシュしていますが、かなり効率的であることが常にわかっています。Image Obj が作成され、Image を割り当てると、イメージは完全にsrcキャッシュに保持されるか、またはクリアするまで保持されます。配列はすべての画像のコンテナとして機能し、必要に応じて画像を要素に割り当てることができます。

1 つのオプションは、'index/default' スクリプトで 1 つの配列を作成し、必要なすべてのイメージを作成することですが、これにより obe6 が言及した問題が発生します。ページから移動すると、配列はもう存在しません (ただし、画像は引き続きキャッシュされます)。すべてのページで配列を使用できるようにしたい場合は、ページごとに新しい配列を作成し、そのページに固有の画像をロードするだけです。これは私が取っているアプローチであり、より整理されているように見え、読み込み時間も長くなる可能性があります.

上で述べたように、ページごとに個別の配列を使用すると、配列の要素に画像を割り当てることができます。たとえば、あなたのコードを使用します：

JavaScript:

var imageArr = new Array();

imageArr[0]=new Image();        
imageArr[0].src='mypath/myimgname.jpg'; 
imageArr[1]=new Image();        
imageArr[1].src='mypath/myimgname.jpg'; 
imageArr[2]=new Image();        
imageArr[2].src='mypath/myimgname.jpg';

var testImage01 = document.getElementById("testImage01");
testImage01.src = imageArr[0].src;

HTML:

<table>
    <tr>
        <td>
            <img id="testImage01" src="" alt="Test Image" />
        </td>
    </tr>
</table>

JS を実行することを忘れないでください。そうしないとonload、img要素はまだ利用できません。サンプルコードには jQuery がありませんでしたが、$(document).ready()そうであれば使用できます。

このヘルプが役に立ち、この方法の使用に関するより良い洞察が得られることを願っています.

于 2012-09-28T18:55:44.740 に答える
1

PHP はブラウザーにヘッダーを送信して、コンテンツをキャッシュするように指示できます。ここを参照してください：

ヘッダーを送信しない場合、ブラウザーは画像をキャッシュする場合とキャッシュしない場合があり、すべてのブラウザーがまったく同じように動作するわけではありません。ヘッダーを送信しても、ブラウザがキャッシュするという保証はありません。ブラウザーは、ユーザーがプライベート ブラウジング モードになっているなど、さまざまな理由でキャッシュ要求を無視する可能性があります。

すべてのブラウザでキャッシュが機能していると仮定しましょう。150 個の大きな画像を含むページは、見た目もパフォーマンスも悪くなります。最初の読み込みが遅くなるのを防ぐには、いくらキャッシュしてもかまいません。

別のアプローチを検討しましたか？単一の大きな画像と一連のサムネイルを表示し、サムネイルが選択されている場合は大きな画像を入れ替えます。これは、最初のページ ビューに大きな負荷がかからず、長時間のキャッシュなどの特別な修正が必要ないことを意味します。

于 2012-09-28T16:56:51.167 に答える