Ajax は読み込みエフェクトを実装します

今回は、Ajax を使用して Loading エフェクトを実装する方法について説明します。Ajax で Loading エフェクトを実装するための 注意事項 は何ですか?

Ajax バックグラウンド データ リクエストのプロセスでは、この時点でページのバックグラウンドがまだ何かを行っていることをユーザーに知らせたいと思うことがあります。これを

進行状況と呼びます。 bar

実装原則:

Jquery は、C# と同様のアスペクト指向の効果を達成するために ajax をグローバルに設定できます。つまり、送信前と送信完了後に Ajax 上で一連の操作を実行できます。これにより、ajax の開始時にロード ボックスを表示し、ajax リクエストの完了後にロード ボックスを閉じることができます。これにより、基本的にこの効果が完全に実現されます。

JqueryでグローバルにAjaxを設定する方法は次のとおりです:

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

もちろん、beforeSend/complete/errorの設定をajaxSetupに書いて公開ページに置くこともできます。 、彼はグローバルなものです〜

最後に、コードを提示してください。便宜上、レイヤープラグインを直接使用して読み込み効果を実現しました。CSSは記述しませんでした。結局のところ、これは私たちの強みではありません〜私には、学生が自分でローディングエフェクトを記述し、jsを使用してその表示と非表示を手動で制御する能力があります。直接コピーしたい場合は、レイヤーとポータルを導入してください: http:/ /layer.layui.com/

here 説明する必要があることの 1 つは、同時に複数の ajax がある場合、1 つがロードされ、他はオフになる可能性があるということです。これについては、次のことが考えられます。 2つの解決策:

■私の現在の解決策は、彼に複数のものを開かせて(座標はすべて同じで表示されません)、最後に終了したものを閉じることです。ここで私が行うことは、ajaxSetupにインデックスパラメータを追加することです(これは set オブジェクト内にのみ書き込むことができます。そうでない場合、すべての ajax はインデックスを使用して同じものを共有します)。

■ この制御ロジックを自分で記述するのに適した別の解決策があります。

は、開始または終了するたびに、 ajax-cout の値を維持し、 ajax が終了するときを判断します。 data-ajax-count が 0 以下の場合は、 p を非表示にする必要があります。可能ですが、私はこの方法を実践していません。

$(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 //动画类型
});
}
});
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ajax+php制御関数の呼び出し手順の詳細な説明

AJAXリクエストキューの詳細な説明

以上がAjax は読み込みエフェクトを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。