読み込み進行状況バーを実装する Ajax メソッド

小云云
リリース: 2023-03-19 12:00:01
オリジナル
2960 人が閲覧しました

この記事では主に読み込み進行状況バーを実現するための ajax の効果を紹介します。これは非常に優れており、必要な方は参考にしていただければ幸いです。

ajax beforeSend:

まず、これについて説明しましょう。これは、リクエストが送信される前に実行されます。たとえば、ユーザーがログインしているかどうかを判断できます。ログインしていない場合は、リクエストを停止してプロンプトを表示します。


  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });
ログイン後にコピー

$.ajax には、リクエストの完了後に実行されるパラメータ complete: function(){} があり、beforeSend で進行状況バーを表示するために使用できます

例:


   $.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          // 设置 进度条到20%慢慢变到50%
        },
        complete: function(){
          // 设置 进度条到80%
        }
        success:function(){
          // 渲染页面
          // 进度到100%
        }
      });
ログイン後にコピー

。これは表面上のものにすぎません。表示される進行状況バーには、実際の読み込みの進行状況ではなく、おおよその進行状況が表示されます。

関連する推奨事項;

Webページ読み込み進行状況バーを実装するためのコード共有

循環動的読み込み進行状況の例のH5キャンバス実装

Webページ読み込み進行状況バー、ダウンロード進行状況バーなどのHTML5/CSS3実装クラシックケース

以上が読み込み進行状況バーを実装する Ajax メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート