2

背景を構成する配置されたdivのいくつかのレイヤーで作業している複雑な横スクロールページがあります。

ページには、読み込み時間を遅くする画像もたくさんあります。

特定の順序でロードするには、背景レイヤー（css背景画像を含むdiv）に優先順位を付ける必要があります（つまり、最初に前の丘、次に後ろの丘、次に空、次に犬）。

これにjqueryロードを使用しようとしましたが、ページにロードされている他のアイテムがまだこれを妨げています。それらを非表示にして、最初にドキュメントの準備ができた状態で表示し、HTMLドキュメントの先頭に配置してみました。ロードイベントでそれを行う方法があると思いますが、ページの残りのロードから優先する方法がわかりません。

基本的にすべての読み込みを一時停止し、4つの画像を順番に読み込んでから、ページの読み込みを続行する方法があるかどうかを調べようとしています。

提案やコメントをありがとう！最初に提出された回答が機能することを承認します。これに似たチケットが他にもあることは知っていますが、私は週末中ずっとこれに取り組んでいて、それらのいくつかを試しましたが、必要なものとまったく同じように機能するものを見つけることができないようです。

ありがとう:)-アン

4

5 に答える 5

1

ここでは、かなり構造化されたアプローチが必要になると思います。

画像の読み込みにかかる時間を決定する要因はたくさんあり、準備が整うとすぐに表示されます。表示する準備ができるまで一部を非表示にしておくこともできますが、それでも一度に大量の画像を読み込んでいるため、時間がかかり、苦痛を伴います。

特定の順序（バックグラウンドファーストなど）でロードする「創造的な」理由があることは明らかです。そのため、スケジュールを立てることで、ロードの振り付けをほぼ行うことができます。

次に、最初のページの読み込みから画像の最初の「波」を除くすべてを削除します。これらはCSSbackground-imageプロパティであるため、これはスタイルシートから削除することを意味します。

background-image次に、jQueryを使用してスタイルプロパティを設定することにより、後続の各画像セットをロードできます。

$('.foreground').css('background-image', 'url(<path>)');

「シーケンス」を作成するには、前のセットの読み込みが完了したときに画像の各セットの読み込みを開始する必要があります。背景画像の読み込みが完了したことを検出する方法については、こちらで説明しますが、パターンは次のようになります。

var loadNextImageSet = function() {
    var imageSet = listOfImageSets.pop();
    loadImages(imageSet);
};

$(document).on('images-loaded', function() {
    loadNextImageSet();
});

loadNextImageSet();

ここでloadImages()、画像の読み込みを非同期的に開始し、images-loaded完了時にカスタムイベントを発生させます。

JavaScriptを使用せずにページを正しく（スムーズではありませんが）ロードしたい場合は、2つのスタイルシートを試してみてください。1つはすべての画像（JS以外のユーザーの場合）、もう1つは最初のウェーブのみのスタイルシート（JSユーザーの場合）です。 ）。次に、次のように正しいものが選択されていることを確認できます。

<html>
<head>
    ...
    <noscript>
        <link rel="stylesheet" href="full.css">
    </noscript>
</head>
<body>
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'background-only.css';
        document.head.appendChild(link);
    </script>
...
</body>
</html>

JavaScriptを使用する最もクリーンな方法ではありませんが、<script>スタイルのないコンテンツのフラッシュを避けるために、要素はできるだけ早い段階である必要があります。

于 2012-09-24T00:53:12.013 に答える
1

最近のブラウザはかなり賢いので、さまざまなファイルのロードを停止するためにできることはあまりありません。

おそらくそれを回避する唯一の本当の方法は、javascriptからほとんどすべてをロードすることです。

すべてをHTMLに入れるのではなく、すべてをJavascriptに入れます。HTMLに背景画像がある場合は、それらが最初に読み込まれ、次にJavaScriptが残りの作業を実行できます。

あまり多くの作業を避けたい場合は、背景などを使用して一種のプリロードページを作成し、AJAXを介して他のすべてをロードするのが簡単な方法です。空のブロック要素を用意し、AJAXを介してサーバーからページコンテンツをリクエストするだけです。

于 2012-09-24T00:34:19.087 に答える
0

私の意見では、最初に背景画像をロードする直接的な方法は、ドキュメントの前に背景画像を配置することです。したがって、ブラウザがページをロードすると、画像がロードされ始めます。しかし、私はおそらく画像を持っていたdivが前面にないかもしれないことを知っています。親divのbackground-image属性を使用できます。また、background-positionを使用して位置を制御します。また、親色にbackground-colorを指定した空のdivレイヤーを使用して、background-colorを表示したくないスペースをカバーすることもできます。そのため、背景のiamgefirestをロードできます。ちなみに、ロードする背景画像が多い場合は、サーバーに何度もリクエストすることになり、遅延が発生します。したがって、すべての背景画像を1つの画像にマージし、「CSSスプライト」の方法を使用して、必要な場所で使用できます。

于 2012-09-24T00:56:30.607 に答える
0

私が知っている最も簡単な方法は、ディスプレイに必要な順序で画像を配置することです。ページの本文の最上部にスタイル設定されたdivはありません。

于 2012-09-24T00:12:50.483 に答える
0

それがあなたに合っているかどうかはわかりませんが、すべてのページをロードすることを考えましたか？JQueryを使用するよりも、必要なものを正しい順序で表示しますか？すべての画像の前にページの一部を読み込むことができます。同じページの単純なバージョンで、画像が明るいか画像がないが、背景のグラデーションなどがある場合もあります。

于 2012-09-24T01:21:07.733 に答える