イメージプリロード...最速の方法

私は高トラフィックのWebページ（本当に高い！）を扱うプロジェクトに取り組んでいます。ランディングページでは、ページがフェーディングされて表示された直後に、たくさんの画像が表示されます（〜40）。これは準備が整う前にロードする必要があるため、ライブラリは使用しません使用する。私たちは4台のイメージサーバーを持っています。誰かが画像をロードする最も良い方法である経験を持っていますか？私は、次のことを試してみました：ページヘッダーにイメージプリロード...最速の方法

、右<head>後、スクリプトタグを挿入：

そう

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

を、画像が始まるとDOMReadyとLoadイベントの前にロードするように仕上げます。しかし、同じURLを持つページの画像は、前に読み込まれたとしても、再び読み込まれるようです。 URLは同じで、キャッシングはありましたが、Mozillaが使われました。

ブラウザがこれらの画像を使用できないようにするメカニズムがありますか？または何？もう1つの質問：DOMと画像が並行して読み込まれると、減速が発生するのでしょうか？

出典

2012-03-07 zak

あなたはCDNを使用していますか？ –

まず、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リクエストの大半を取り除くと、スプライトシートはすぐにキャッシュされ、ユーザが訪れる次のページにはすでにロードされています。

EDIT

はここで多くの画像をプリロードする方法です：

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-07 15:42:00

この回答はイメージのプリロードを行いません。スプライトは行くべき方向ですが、私はこの答えがどのようにプリロード問題を解決するのか分かりません。 – jfriend00

DOMの準備ができてから画像が読み込まれた場合、特に画像が重い場合には、より良いユーザーエクスペリエンスが得られると思います。プリロードすると、サイトを表示する前に画像の読み込みを待つようにユーザーに求めています。 –

イメージをプリロードすると、ユーザーはあなたのオプションよりも長く待つことになるのはなぜですか？画像をプリロードするという考えは、それらが早く利用可能であり、ユーザがそれほど待たなければならないようにすることである。ページのHTMLは、ユーザーが操作できるようになる前に画像が読み込まれるのを待つことはありません。 – jfriend00

イメージプリロード...最速の方法

答えて

関連する問題