2

序文：

簡単な方法で動作する Web アプリがあります。

  1. ユーザーがページ 1 のボタンをクリックします。これにより、ページ 2 の POST 要求が送信されます。

  2. ページ 2 では、バックエンドでデータを取得するのに 1 ～ 2 分かかります。

  3. ページ 2 のバックエンドは、計算された HTML をブラウザに送信します。レンダリングにはしばらく (10 ～ 30 秒) かかります。

ここでの明らかなユーザビリティの問題は、ユーザーがステップ 1 でボタンをクリックしたときに、Web ページが何もしていないように見える間、そこに座っていなければならないことです (ブラウザは、ステータス バーのページ 2 に接続していることを示しますが、ほとんどのユーザーはそうしません)。気付かないで); そして、コンテンツがレンダリングされ、DOMが大きなデータセットから構築されている間、ページ＃1のコンテンツを何もしていないように見えるEMPTYページに置き換えます。

上記のソリューションはひどく設計されており、次のように適切に再設計する必要があるという事実は脇に置いておきます。(1) データを取得するために AJAX を利用する。および/または (2) データをより小さな (人間が消費可能な) チャンクで取得し、必要に応じてより多くのデータを段階的にロードします。リソースの制約によるそのような再設計がないため、次の性質の迅速で汚いユーザビリティ修正を適用しようとしています:

A. ページ 1 のボタンをクリックすると、「データを処理して再読み込みしています。完了するまでに 3 分ほどかかる場合があります」というモーダル ポップアップが表示されます。

B. 重要なことは、ページ 2 のロード開始時にモーダル ポップアップが持続する (少なくとも再作成されるように見える) ことです。

質問:

このようなモーダルポップアップを構築するための「ベストプラクティス」アプローチは何ですか?

明らかに、#A だけを達成するのは簡単です (ページ 1 のポップアップは、ページ 2 からの HTTP 応答がクライアントに到着し、ページ 2 がページ 1 を置き換えるレンダリングを開始するまで残ります)。

しかし、ページ 2 が表示されたときにこのポップアップを保持/再複製する最良の方法は何ですか? ここでの 2 つの問題は、可能な限り、HTTP 応答の前のポップアップと後のポップアップからのシームレスな移行を達成することです。さらに重要なことは、完全なページ #2​​ がレンダリングされるまで (ポップアップが表示されるまでに 30 秒間) 待機する必要がないようにすることです。

説明:

  • 提案されたアプローチは、AJAX であってはなりません。たとえば、ページ 2 の HTTP 応答が送信したものと同じ HTML コンテンツに、行われるすべての内容が含まれている必要があります。

  • 必ずしもコード例ではなく、一般的な技術的な指針を探しています。「ハンドラーを使用してこれを行う」の順序で何かwindow.onload（明らかに間違った答えの正確さ）。

  • ソリューションは理想的には純粋な Javascript を使用する必要がありますが、jQuery または YUI を使用したより良いソリューションが存在する場合は、それを検討します。

4

2 に答える 2

1

したがって、これは実際には非常に簡単な修正です。いくつかのサンプル オーバーレイ コードについては、このフィドルを確認してください。

ページの準備ができたら、次の呼び出しを行うだけです (jQuery を使用している場合)。

$(function(){
    $('.overlay').fadeOut();
});

基本的に、デフォルトではオーバーレイが表示され、その下にロードされているものはすべて非表示になります。すべてがロードされたら、オーバーレイをフェードアウトするだけで完了です! 特別なスクリプトなどは必要ありません。オーバーレイをデフォルトでオンにし、準備ができたらオフにするだけです。

これを AJAX に使用したい場合は、ajax 呼び出しを行う前に を呼び出すだけ$('.overlay').fadeIn();です。オーバーレイ内のテキストを変更するのも非常に簡単です。ノードを見つけるだけで、

$('.overlay').find('.message p').text('Some new text').end().fadeIn();

標準の JS を使用したいだけの場合はwindow.onload、提案したように関数をアタッチできますが、jQuery のように DOM ではなく、ページの準備ができたときにのみ検出されます.ready()。

于 2012-05-24T21:29:00.370 に答える
0

それで、あなたの論文の質問から私が理解していることから（正直に読むのは大変です）

  • あなたのページリクエストは、通常の「このリンクをクリックして、非常に遅いページをロードする」だけだと思います。
  • 読み込みが非常に遅いことを示したい
  • ページ 2 の到着時にインジケーターをさらに 10 秒以上表示してレンダリングします

ページ 2 のモーダルをできるだけ早くロードする必要があります。ライブラリとスクリプトをヘッドにロードします。通常、解析はトップダウンで行われるため、モーダルは遅いコンテンツの前に配置して、解析してスクリプトで使用できるようにする必要があります。

すべてのコンテンツ (DOM、画像、およびすべて) がレンダリングされたときに実行される$(document).ready()の代わりに、DOM の準備が整うとすぐに実行されるjQuery を利用します。window.onload

<script src="jquery.js"></script> <!--libraries like jquery-->
<script>
    $(function(){             //execute dialog as soon as 
        $('#modal').dialog(); //the modal div is available
    });
</script>
<body>
    <div id="modal"></div>
    <!--the rest of the slow rendering page-->
</div>
于 2012-05-24T21:31:59.477 に答える