1

私はSOで、Webページの読み込みを高速化するために画像の配列をプリロードすることについて読みました。これにより、アプリケーションがそれらを表示する必要があるときに、それが読み込まれ、すぐに表示できるようになります。しかし、私の疑問は、コード スニペットをどこに含めるかでした。

  • ページの下部または

  • 最初に ( <head>)?

    また、読み込みを高速化するには、すべての JavaScript を下部に含める必要があることも読みました。どちらがより良い方法になりますか？それとも、両方の方法で妥協する必要がありますか?

JavaScript コード:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
preload([
    'images/bg.jpg',
    'images/logo1.png',
]);
</script>
4

4 に答える 4

1

他のすべての答えは本質的に正しいですが。彼らはあなたに直接話しかけていないようです。

スクリプトは DOM 要素を使用していません。つまり、DOM が読み込まれるのを待つことはまったく問題ではありません。

のダウンロード中にレイアウトのレンダリングが停止すること<script/>は常に懸念事項です ( などの新しい HTML5 機能を使用しない限りasync) </body>。

の前に配置すると</body>、レンダリングが停止しません。パフォーマンスに関して言えば、このような小さな配列を反復することは、マイクロ最適化にすぎない可能性があります。

ちなみに、$()use.each()に配列をラップする必要はありません$.each。

function preload(arrayOfImages) {
    $.each(arrayOfImages, function(index, image){
        $('<img/>')[0].src = image;
    });
}
于 2013-01-13T12:47:57.127 に答える
0

通常、関数呼び出しと、ページの読み込みが完了した後に実行するすべてのことを内部に配置します

$(document).ready(function() {
  // Handler for .ready() called.
});

（ドキュメントを参照）。

これは、への呼び出しにも当てはまりますpreload(...)。を使用する$('<img/>')[0].src = thisと、ブラウザは次のコメントに従って画像をキャッシュします：jQueryを使用した画像のプリロード

編集： Konstantinが指摘したように、DOMツリー内のタグの位置は<script/>わずかな役割しか果たしません。

于 2013-01-13T12:38:00.413 に答える
0

HTML ページの上部と下部は、ブラウザーがページを読み取る方法であるため、関連性があります。上の作業は、下の作業よりも先に完了します。

画像の事前読み込みに関しては、ページの上部で行う必要があります<head>。なんで？まだ使う必要がないからです。ページの残りの部分は準備ができておらず、画像を配置したい場所がまだ存在していない可能性があります。

DOM の準備ができたら何かをしたいので、通常は JavaScript をページの下部に配置します。上にも置けます！ただし$(document).ready(function(){});、意図したとおりに機能することを確認するには、必ず を使用する必要があります。

そのため、ページの残りの部分もロードしている間に、上部で (または window.onload を使用して) プリロードを開始します。CSSを使用するか、ページの上部で発生する特定のdivのロードイベントをバインドしてそこに画像を事前にロードしない限り、上部でそれを行うことから実際に多くの利益を得ることはありません.

于 2013-01-13T12:44:15.617 に答える
0

BODY セクションの最初に DIV を作成し、その DIV を可視領域の外に移動してみませんか?

于 2013-01-13T12:51:02.403 に答える