jquery - ページの読み込み中にユーザーがアクションを実行できないようにする

Question

タブ付きの Web アプリケーションがあり、ページ遷移の前に画像のキャッシュも作成したので、ユーザーがページに移動すると、そのページに遷移する前にすべての画像がダウンロードされていることを確認します。

多くの画像があるタブをクリックすると、スピナーが表示され、バックグラウンドで画像のダウンロードが開始され、終了後にページが表示されます。

しかし、これを行っている間、ユーザーの入力やタップをフリーズしたいと考えています。では、ページ全体をフリーズおよびフリーズ解除する最良の方法は何ですか?

score 16 · Accepted Answer

jQuery Block UIと呼ばれる定義済みの jQuery UI を使用できます。

または、ボディをブロックし、ボディが読み込まれるとフェードアウトする分割を追加するだけです。

<div id="div">
    <h1>Please Wait..</h1>
</div>

jQuery は次のようになります。

$(document).ready(function(){
    $("#div").fadeOut()
  });

これが実際の例です。画像が完全に読み込まれるまで、ページはブロックされます。

score 2 · Accepted Answer

この JQuery コードは、ページ上の要素を無効にできます。

$("body").find("*").attr("disabled", "disabled");
$("body").find("a").click(function (e) { e.preventDefault(); });

そして、この JQuery コードは要素を再び有効にします。

$("body").find("*").removeAttr("disabled");
$("body").find("a").unbind("click");

score 0 · Accepted Answer

私が使う：

$(window).bind('load', function() {
    // code here
});

ページが完全に読み込まれるまで、このイベントは発生しません。そこで、ページの要素のロックを解除する関数を呼び出すことができます。

楽しみ：）

score 0 · Accepted Answer

トップレベルの透明/半透明オーバーレイでインターフェイスを覆うと、その下にある要素のイベントがブロックされます。

ただし、これを行うと、ユーザーから UI コントロールを奪うことになります。

4 に答える 4