PHP で読み込みプログレスバー関数を実装する方法について話しましょう。

ほとんどの Web サイトでは、Ajax テクノロジを使用してページを部分的に更新する必要があります。多くの場合、ユーザー エクスペリエンスを向上させるために、読み込みの進行状況バーが必要です。この記事では、PHP で読み込み進行状況バーを実装する方法について説明します。

1. Ajax テクノロジーとは何ですか?

Ajax (Asynchronous JavaScript and XML) テクノロジは、サーバーと非同期にデータを送信することで部分的なページを更新する、ブラウザベースのクライアント側スクリプト テクノロジです。最大の特徴は、ページ全体を更新せずにデータを更新する非同期送信です。これは、ユーザーエクスペリエンスを向上させることができる主な理由でもあります。

2. 読み込みプログレスバーの実装方法

読み込みプログレスバーの実装は、主に以下の 2 つの方法で実現できます。

1. CSS3 の実装

CSS3 の実装方法は比較的簡単で、CSS を使用するだけで実装できます。スタイル コードは次のとおりです。

/*设置进度条的宽度 */
.progress-wrap {
  width: 100%;
  height: 5px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 99999;
}
/*设置进度条的颜色 */
.progress-bar {
  width: 0;
  height: 5px;
  background-color: #5ea9dd;
  animation: progress-bar 2.5s linear;
}
/*设置进度动画 */
@keyframes progress-bar {
  from { width: 0; }
  to { width: 100%; }
}

2. JavaScript の実装

JavaScript の実装メソッドは少し複雑で、XMLHttpRequest オブジェクトとそのイベントを使用して実装する必要があります。

まず、進行状況バーの HTML コードをページに追加する必要があります:

<!--加载进度条-->
<div id="loading" class="loading">
  <div class="loading-container">
    <div class="loading-progress">
      <div class="loading-bar"></div>
    </div>
  </div>
</div>

次に、CSS で進行状況バーのスタイルを設定する必要があります:

/*加载进度条*/
.loading {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
}
.loading .loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading .loading-progress {
  margin: 0 auto;
  width: 200px;
  height: 5px;
  background-color: rgba(255,255,255,.3);
  border-radius: 5px;
}
.loading .loading-progress .loading-bar {
  height: 5px;
  background-color: #fff;
  border-radius: 5px;
  animation: loading 2.5s linear;
}
/*设置进度动画*/
@keyframes loading {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

最後に, JavaScript で Ajax 非同期リクエストの関連ロジックを実装する必要があります:

//创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//设置监听事件
xhr.onreadystatechange = function () {
  //请求完成后
  if (xhr.readyState == 4) {
    //隐藏进度条
    $('#loading').fadeOut(300);
    //请求成功
    if (xhr.status == 200) {
      //处理响应数据...
    }
    //请求失败
    else {
      //处理错误...
    }
  }
}
//发送请求
xhr.open('GET', '/path/to/server', true);
xhr.send(null);
//显示进度条
$('#loading').fadeIn(300);

3. 概要

PHP で読み込み進行状況バーを実装する方法は比較的簡単です。CSS3 またはJavaScript.を満たすために。しかし、JavaScriptを使用すると、プログレスバーの表示タイミングやデータの処理をより自由に制御できるようになります。実際の開発プロセスでは、実際のニーズに応じて柔軟に実装方法を選択できます。

以上がPHP で読み込みプログレスバー関数を実装する方法について話しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。