Ajaxグローバルローディングブロック（Loading効果）の構成
1866 ワード
Ajaxでバックグラウンドデータの要求を行う過程で、ユーザーがページのバックグラウンドがまだ何かをしていることを知ってほしいと思う時があります。この時にはユーザーに非常に明確なヒントを与える必要があります。つまり、私達のいわゆるプログレスバーです。
実現原理：
Jqueryはajaxに対して全体的な設定ができます。C〓の中で面に向かうような効果を実現します。すなわちAjax提出前と提出後に、私達は全部一連の操作ができます。だから、ajax開始時にLoading枠を表示します。ajax要求が完了したら、loading枠を閉じます。基本的には完璧にこの効果を実現しました。
Jqueryグローバル構成Ajaxの方式は、
最後にコードを差し上げましょう。私はここでやる時に、自由のために、直接layerというプラグインを使って、loadingの効果を実現しました。マニュアルでcssを書いていません。結局、これは私の強みではありません。能力のある学生は自分でこのloadingの効果を書いて、js手動でコントロールして隠しの方式で実現します。直接的にcopyするなら、layerを導入してください。転送ゲート：http://layer.layui.com/
ここで説明したいのは、複数のajaxが同時に存在する場合、一つのロードが完了したら、他のものを全部消してしまうかもしれません。これに対して、私が思い付くのは次の2つの解決案です。
■私の現在の解決方法は彼に複数の（座標が同じです。見えません）を開けてください。そしてオフの時はどれが終わったらいいですか？ここのやり方はajaxSetupの中にindexパラメータを追加しました。
■この制御ロジックを自分で書くのに適した解決策があります。ロードフレームだけを表示して、現在どれぐらいのajaxが実行されているかをロードボックスに書いてください。実行中のパラメータは
実現原理：
Jqueryはajaxに対して全体的な設定ができます。C〓の中で面に向かうような効果を実現します。すなわちAjax提出前と提出後に、私達は全部一連の操作ができます。だから、ajax開始時にLoading枠を表示します。ajax要求が完了したら、loading枠を閉じます。基本的には完璧にこの効果を実現しました。
Jqueryグローバル構成Ajaxの方式は、
$.ajaxSetup({
beforeSend: function () {
//ajax
},
complete: function () {
//ajax ，
},
error: function () {
//ajax
}
});最後にコードを差し上げましょう。私はここでやる時に、自由のために、直接layerというプラグインを使って、loadingの効果を実現しました。マニュアルでcssを書いていません。結局、これは私の強みではありません。能力のある学生は自分でこのloadingの効果を書いて、js手動でコントロールして隠しの方式で実現します。直接的にcopyするなら、layerを導入してください。転送ゲート：http://layer.layui.com/
ここで説明したいのは、複数のajaxが同時に存在する場合、一つのロードが完了したら、他のものを全部消してしまうかもしれません。これに対して、私が思い付くのは次の2つの解決案です。
■私の現在の解決方法は彼に複数の（座標が同じです。見えません）を開けてください。そしてオフの時はどれが終わったらいいですか？ここのやり方はajaxSetupの中にindexパラメータを追加しました。
■この制御ロジックを自分で書くのに適した解決策があります。ロードフレームだけを表示して、現在どれぐらいのajaxが実行されているかをロードボックスに書いてください。実行中のパラメータは
に似ています。開始または終了の度にajax-coutの値を維持します。divを隠してもいいはずです。この方法は私は実践していません。
$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert(' ， ， ', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //
});
}
});
});