7

ケース 1:

多くの複雑なレイアウトとフォントを含む非常に大きな HTML ページを読み込みます。ページのレンダリングには不明な時間がかかります。

ケース 2:

jquery .html() 関数を使用して、DOM に大幅な変更を加えています。変更された DOM のレンダリングには不明な時間がかかります。

どちらの場合も、ページのレンダリングが完全に完了するまで、画面全体をスピナーでカバーできるようにしたいと考えています。

この質問に対する回答を探していると、同様の質問がされていることがわかりましたが、回答は関連していません。明確にするために：

いつ DOM の準備ができるか知りたくありません。

HTTP データがいつ取得されたか知りたくありません。

DOM 内のすべてが完全に画面に描画されたときを知りたいです。

最悪の場合のタイムアウトを設定することは、受け入れられる解決策ではありません。

WebKit ベースのブラウザー用のソリューションが必要です。

4

4 に答える 4

2

ほんの小さなポイント。ほとんどのブラウザは、JavaScriptの処理中にスピナーをアニメーション化しません。特に、非常にシングルスレッドで動作するIE。

「スピナー」には、アニメーション化されていない別のデザインを使用する価値があります。砂時計のようなもの。

$（document）.readyイベントで呼び出す初期化コードの後に​​何かを入れてみませんか。IEの場合、最後に起動する必要があります。

于 2010-12-29T14:35:21.360 に答える
1

このようなものがうまくいくはずです：

...
<head>
  ...
  <style type="text/css">
    #overlay {
      background:url(../images/loading.gif) no-repeat 50% 50%;
      display:none;
    }
    .loading #overlay {
      display:block;
      left:0;
      height:100%;
      position:absolute;
      top:0;
      width:100%;
    }
    .loading > #overlay {
      position:fixed;
    }
  </style>
  <script>
    if (document.documentElement) {
      document.documentElement.className = 'loading';
    }
  </script>
</head>
<body>
  ..
  <div id="overlay">
    ..
  </div>
  <script>
    $(document).ready(function() {
      $('.loading #overlay').fadeOut(500,
        function() {
          $(document.documentElement).removeClass('loading');
          $('#overlay').remove();
        });
    });
</body>
</html>
于 2010-12-21T09:28:12.903 に答える
0

ケース1の場合、次を使用できると思います：

<BODY onLoad="alert('Page Fully Loaded')">
于 2010-12-21T07:58:31.927 に答える
0

私の頭の上から、次のようなことができます：

var img_loaded;
$(lastImg).load(function () { img_loaded = true; });

(function checkLoading() {
    return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50);
}());

もちろん、これには多くの間違いがあります:

  1. Image.onload イベントが通常どおりに機能することを前提としています (イメージは完全にダウンロードされ、すべてが完了しています)。Safari が wi​​ndow.onload を「ごまかす」場合、画像でそれらを信頼できますか?
  2. CSS ファイルの最後のルールが最後に実行される (そして完了する) ことを前提としています。最後のルールが font-weight か何かで、最後から 2 番目のルールが MB の背景画像をロードしている場合、それも機能しないと思います。
  3. 絶え間ない注意が必要です。ページごとに異なる部分を更新する必要があります。そのままでは、スケーリングしません。

リンク先の記事では Safari 3 についてのみ説明されていました。Safari の onload 2 バージョン以降も信頼できないでしょうか?

于 2010-12-21T02:30:11.367 に答える