Parlons de la façon d'implémenter la fonction de barre de progression de chargement en PHP

Dans la plupart des sites Web, vous rencontrerez le besoin d'actualiser partiellement la page via la technologie Ajax. Dans de nombreux cas, une barre de progression de chargement est nécessaire pour améliorer l'expérience utilisateur. Cet article explique comment implémenter une barre de progression de chargement en PHP.

1. Qu'est-ce que la technologie Ajax ?

La technologie Ajax (JavaScript asynchrone et XML) est une technologie de script côté client basée sur un navigateur qui met à jour des pages partielles en transmettant des données de manière asynchrone avec le serveur. Sa plus grande fonctionnalité est la transmission asynchrone, qui met à jour les données sans actualiser la page entière. C’est également la principale raison pour laquelle il peut améliorer l’expérience utilisateur.

2. Comment implémenter la barre de progression de chargement

Pour la mise en œuvre de la barre de progression de chargement, cela peut être réalisé principalement via les deux méthodes suivantes.

1. Implémentation CSS3

La méthode d'implémentation CSS3 est relativement simple, il vous suffit d'utiliser CSS pour l'implémenter. Le code de style est le suivant :

/*设置进度条的宽度 */
.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. Implémentation JavaScript

La méthode d'implémentation JavaScript est légèrement plus compliquée et doit être implémentée à l'aide de l'objet XMLHttpRequest et de ses événements.

Tout d'abord, nous devons ajouter le code HTML de la barre de progression à la page :

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

Ensuite, nous devons styliser la barre de progression en 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%;
  }
}

Enfin, nous devons implémenter la requête asynchrone Ajax dans la logique JavaScript :

//创建 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. Résumé

La méthode permettant à PHP d'implémenter la barre de progression de chargement est relativement simple. Nous pouvons utiliser CSS3 ou JavaScript pour l'implémenter. Cependant, l'utilisation de JavaScript vous permet de contrôler plus librement le timing d'affichage de la barre de progression et le traitement des données. Dans le processus de développement actuel, nous pouvons choisir de manière flexible une méthode de mise en œuvre qui nous convient en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!