1

ランディング ページに背景として 2 つの重い画像があります。それらは特定の順序で表示されるため、ユーザーエクスペリエンスを向上させるためにその順序でロードしようとしています。以下のコードを試しました：

        function loadImages(){
            img1= new Image();
            img2= new Image();

            img1.onLoad=img1Loaded();
            img1.src='img/bg1.jpg';
        }

        function img1Loaded(){
            console.log('image1 loaded');
            window.document.getElementById('page1').style.background= " #009ee3 url(img/bg1.jpg) no-repeat left top"; 
            window.document.getElementById('page1').style.backgroundSize="cover";
            img2.onLoad=img2Loaded();
            img2.src='img/bg2.jpg';
        }
        function img2Loaded(){
            console.log('image2 loaded');
            window.document.getElementById('page2').style.background= ' #009ee3 url(img/bg2.jpg) no-repeat center top';
            window.document.getElementById('page2').style.backgroundSize="cover";

        }

コンソール メッセージ:

image1 loaded
image2 loaded

正しい順序で表示されますが、ほぼ同時に表示されます。数秒後、両方の画像が同時に表示されます。

私のソリューションの何が問題なのですか?どうすればよいですか?

4

1 に答える 1

2

最新の Web ブラウザーが 1 つの接続しか開かないことはめったにありません。HTML がダウンロードされると、すべてのリソースが収集され、ブラウザーはそれらの多くを並行して読み込みます。これが、あなたのアプローチがおそらくあまり役​​に立たない理由です。

表示されるタイミングには多くの理由があります。最も一般的なのは、以前にこのページを開いたことがあり、まだキャッシュに画像が残っている場合です。ブラウザは、キャッシュ内の画像がまだ「十分」であるかどうかを判断できる小さな HEAD リクエストを発行します。

キャッシュをフラッシュして再試行してください。

編集devnull69が言ったように、コードには2つの重大なバグがあります:

  1. 設定onLoadは効果がありません。イベント ハンドラが呼び出されonloadます。
  2. 関数参照を割り当てる代わりに、実際に関数を呼び出します。img1.onload=img1Loaded代わりに使用してください。

これら 2 つのバグ修正がないと、上記のコードは次のようになります。

  1. img1Loaded();印刷する呼び出しimage1 loaded
  2. img2Loaded();印刷する呼び出しimage2 loaded
  3. 割り当てimg2.srcます (2 番目のイメージを読み込みます)。これにより、スクリプトが返された後に実際にロードがトリガーされます。
  4. 割り当てimg1.src(最初の画像を読み込み、おそらく他の画像と並行して)
于 2013-10-14T11:33:15.277 に答える