0

私はトラフィックの多いウェブページ（本当に高い！）を扱うプロジェクトに取り組んでいます。ランディングページには、ページが読み込まれた直後に大量の画像が表示されます（〜40）。フェードインして表示するには、ライブラリを使用しません。準備が整う前に読み込む必要があるため、このためのライブラリは使用しません。使用します。4つのイメージサーバーがあります。画像を読み込むのに最適な経験はありますか？私は次のことを試しました：

ページヘッダーの直後に<head>、スクリプトタグを挿入しました。

<script>
   var img = new Image(); img.src= "src of the image";
</script>

そうすることで、画像はDOMReadyおよびLoadイベントの前にロードを開始および終了します。ただし、同じURLのページ上の画像は、以前に読み込まれた場合でも、再度読み込まれるようです。URLは同じで、キャッシュはオンで、Mozillaが使用されました。

たぶん、ブラウザがそれらの画像を使用するのを妨げるいくつかのメカニズムがありますか？または何？別の質問：DOMと画像が並行して読み込まれる場合、速度が低下しますか？

4

1 に答える 1

0

まず、CSS スプライトを使用することをお勧めします。詳細については、次を参照してください。

http://www.alistapart.com/articles/sprites

次に、DOM 対応の画像をロードする場合は、次を使用します。

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + event, func);
  }
}

listen('load', window, function() {
  var img = new Image();
  img.src= "src of the image";
});

スプライトを使用すると、読み込み時間が半分になります。HTTP 要求の大部分を排除すると、スプライト シートがすぐにキャッシュされるため、ユーザーがアクセスする後続の各ページには既に読み込まれています。

編集

多くの画像をプリロードする方法は次のとおりです。

function preload(images) {
  if (document.images) {
    var imageArray = [];
    imageArray = images.split(',');
    var imageObj = new Image();
    for (var i = 0; i < imageArray.length; i += 1) {
      imageObj.src = imageArray[i];
    }
  }
}

次のように関数を呼び出します。

preload('image1.jpg,image2.jpg,image3.jpg');
于 2012-03-07T15:42:00.710 に答える