1

Gmailに似たプログレスバーを作成するにはどうすればよいですか？私はdisplayと呼ばれるdivを持っており<div id="display"></div>、コンテンツはjqueryを使用して外部ページからフェッチされ、$('#display').load('somepage.html');この部分は.click（）イベントを使用してアクティブ化されます。だから私が試しているのは、「display」にロードするためにsomething.htmlをフェッチするときですが、プログレスバーをに追加するにはどうすればよいですか？<div id="display"></div>ここに画像の説明を入力してください

4

3 に答える 3

3

jQueryUI Progress Barをお勧めします。Gmail プログレス バーのスタイルに似たアニメーション バージョンがあります。jQuery Theme Rollerを使用して、Gmail と同じ方法でスキンを適用できます。

残念ながら、jQuery.load は完了したパーセンテージを提供しないため、プログレス バーをゆっくりと完了に向けてアニメーション化することで合計パーセンテージを知っているという効果を偽装できます。ロード時に完了コールバックが実行されたら、プログレス バー アニメーションを完了する必要があります。.load() を呼び出す前に遅いアニメーションを開始し、ページが完全に読み込まれる前に偽のアニメーションを終了しないように、アニメーションを十分に遅くしてください。

使用できる.load() の代替手段がいくつかあります。あなたの場合、進行状況を複数の.load()呼び出しに分割し、それらに任意のパーセンテージ ポイントを割り当てる必要があると思います。たとえば、最初の .load() が終了したら、プログレス バーを 25% に移動し、次に 2 番目のコンテンツ ロードのために 50% に移動します。

于 2013-01-02T15:04:37.337 に答える
0

http://api.jquery.com/jQuery.ajax/を使用して (ロードの代わりに) コンテンツをロードし、イベント「beforeSend」および「success」を使用してローダーの CSS を変更できます。

于 2012-12-18T06:26:41.570 に答える
0

スタイリングに Bootstrap のプログレス バーを使用できます。

関数 .load() が開始する前にプログレスバーを追加します。jQuery 関数 load() には、オプションの 2 番目のパラメーター (ページの読み込み後に実行される関数) があります。この関数では、プログレスバーを再度削除するようにページに指示します。

それが役立つことを願っています...

于 2013-01-02T15:05:58.147 に答える