ページが完全に読み込まれるまで、Webページに進行状況バー/読み込みポップアップを表示したいと思います。Webページが完全に読み込まれるまでWebページ上に進行状況バーを表示する方法は？
私のWebページにはHTMLエディタが含まれているため重いです.HTMLエディタはjQueryベースのHTMLエディタであり、ロードに時間がかかります。読み込み中は、ページ全体に読み込みが完了した直後に削除されるプログレスバーをページに表示します。
進行状況バーを表示する方法がわかりません。
ロードポップアップの表示は簡単ですjQuery BlockUI Plugin
headタグ内のjQueryとBlockUiプラグインを参照するだけです。
このようなことをしてください。
$(document).ready(function() {
// block page
$.blockUI();
//load your editor here
//after load complete unblock page
$.unblockUI();
});
あなたはCKEditorバージョンのようなものを使用している場合、より良いまだ、あなたはCKEditorバージョンの負荷を完全にコールバックした後、ページのブロックを解除することができます。
ページが10秒間ブロックされている小さな例です。あなたのコールバックで同じことを設定することができます。 （Example Here）
リソース（JavaScriptファイル）のリストが利用可能な場合、あなたはこのような何か行うことができます。
var loadedResources = 0;
var deferreds = [];
var resList = [ 'res1.js', 'res2.js' ];
$.each(resList, function(index, res) {
var load = $.ajax({
type: "GET",
url: res,
dataType: "script"
}).then(function() {
loadedResources += 1;
//Update progress bar here
//Use variable 'loadedResources' and 'resList.length'
//to calculate the width of the progess bar
});
deferreds.push(load);
});
$.when.apply(this, deferreds).then(function() {
//Hide or remove progress bar here because all resources were loaded
});
リソースを使用すると、プログレスバーを更新ロードされたすべての時間を。すべてのリソースがロードされたら、進行状況バーを非表示にすることができます。
$.when.apply()は、遅延されたアレイを1つの中央遅延させるために使用されます。この中央繰延が終了した場合、すべての繰延は終了します。
もちろん、イメージなどをリソースリストに追加することもできますが、特定のリソースに対してはthe way of loadingを変更する必要があります。
here必要な場合は、遅延オブジェクトの詳細を参照してください。
編集：明らかに、リソースアレイ内に1つのリソースしかない場合、実際のプロセスは表示されません。