1

Web サイトのさまざまなページで使用されている 12 ほどの画像をプリロードして、ユーザーがページを開くと、そこに含まれる画像がすぐに開くようにしたいと考えています。

これを実現するために、タグ内に次のスクリプトを配置しました。

<script>

if (document.images) {
var my_image_one = new Image();
my_image_one.src= "path/to/images/my-image-one.jpg";
var my_image_two = new Image();
my_image_two.src= "path/to/images/my-image-two.jpg";
var my_image_three = new Image();
my_image_three.src= "path/to/images/my-image-three.jpg";

/* etc. */

</script>

スクリプトで見られる問題:

  1. 繰り返しです。
  2. 実行されるため、新しいページが読み込まれるたびに (画像が既に読み込まれている場合でも)、画像を読み込もうとします。

次のようなものを作成して、それを改善したいと思います。

if (document.images) {
my_images = array (image_name=>path/to/image/image-name.jpg, et cetera);
for (i=1;i++;i<=array.length) {
if "the image hasn't been preloaded yet" {
preload image;
} 
}

これを適切な JavaScript にどのように変換できますか?

4

1 に答える 1

1

次のような文字列の配列を作成できます。

var paths = [ "first/path", "second/path", "third/path" ];

冗長なロードについて心配する必要はありません。ブラウザがそれを判断します。それがキャッシュの要点です。

ページ内の既に設定されている場所でこの作業を行っている場合document.images、画像のリストが複数ページのサイトに対して包括的でない限り、まったく意味がありません。1 つのページの場合、ブラウザーはその時点までに DOM を解析し、すべての<img>タグを確認しているため、既に画像を読み込んでいます。あなたが見ているページのためだけに画像をプリロードすることは、おそらく一般的には価値がありません. 後続のページがすばやく表示されるように、大きな複数ページのサイトの「ようこそ」の紹介ページから行うと便利です。

于 2013-05-29T15:17:26.957 に答える