0

Railsベースのローンチ前のサイトがあり、ユーザーがロードする前にサイトを離れるなど、ロードに時間がかかりすぎる回転する背景画像（サイトのアイデアを販売するために重要）があります。彼らが目にしているのは、メール送信ボックスだけです。

サイトの読み込みに時間がかかるが、妥当な時間が経過するとそのメッセージが消えるというメッセージをユーザーに表示する良い方法は何ですか。タイマー付きのjQueryfadeOut（）を推測していますが、いつカウントを開始するかわからないため、タイマーを設定する期間がわかりません。

助言がありますか？

4

1 に答える 1

0

以前、自分が書いたアプリでこのような状況に対処しなければならなかったので、私の提案が役立つことを願っています！私は...するだろう：

  1. 可能な限り必要最低限​​の非常に基本的なDOMマークアップをロードします。Barebonesは、外部にロードされたアセットがなく、純粋なhtmlタグとcssだけです。これは非常に速くロードされるはずです。画像が読み込まれていることをユーザーに知らせる、ある種のメッセージを含むdivを作成します（例<div class = 'loading_images'>loading...</div>）
  2. jQueryについて言及したので、アクセスできると仮定します。そうでない場合は、このビットに標準のJavascriptを使用できます。ここでの考え方は、AJAXを使用してロードしようとしている画像を取得し、取得後に配置する必要のあるDOM要素に画像を挿入し、すべて完了したらロードメッセージを閉じることです。このように、タイマーを設定したり、リクエストが完了するまでにかかる時間を推測したりする必要はありません。リクエストが完了したら、読み込み中のメッセージを閉じて、楽しい道を進むことができます。jQueryを含める場合は常に、このようなものをdocument.readyハンドラーに入れてください
$（document）.ready（function（）{

  var request = $ .ajax（{
                        url：url_to_your_image、
                        タイプ： "GET"、
                        成功：関数（データ）{
                                $（whatever_context_or_div_to_insert_your_image）.html（data）
                                $（'。loading_images'）。hide（）
                                }  
                      }）;
  }）

このコードは、DOMが読み込まれるまで待機してから、ページに挿入する画像を取得するための新しいAJAXリクエストを作成します。画像が正常に読み込まれると、成功メソッドが画像（'data'という名前の変数）で呼び出され、目的の場所に挿入されます。最後に、ユーザーがページとそのコンテンツを完全に操作できるように、読み込みメッセージは非表示になっています。

ここで注意すべき2つの重要なことがあります。

  • 現状では、リクエストが失敗した場合（たとえば、画像がAJAXを介して正常に読み込まれない場合）、コードは何も実行しません。その場合の処理​​方法については、$。ajaxとエラーコールバックのjQueryドキュメントを参照してください。
  • 上記のコードスニペットの記述方法では、1つの画像のみが読み込まれます。持っている画像をいくらでもロードするための簡単なハックのために、AJAXリクエストをforループに含めて、その方法で画像をロードすることができます。ただし、これは適切な方法ではないため、代わりに、単一の画像スプライトを作成し、AJAXを介してその画像スプライトのみを取得し、CSSを使用して小さい画像を大きい画像から切り出すことを検討することをお勧めします。
于 2012-09-12T03:35:38.800 に答える