Méthode Ajax pour implémenter la barre de progression du chargement

Cet article vous présente principalement l'effet de la barre de progression de chargement ajax. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

ajax beforeSend :

Parlons d'abord de beforeSend, qui est exécuté avant l'envoi de la requête. Par exemple, il peut déterminer si l'utilisateur est connecté. non, arrêtez la demande et l'invite.

  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });

$.ajax a un paramètre complete : function(){} est exécuté une fois la requête terminée, et peut être utilisé pour afficher la barre de progression avec beforeSend

Par exemple :

   $.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          // 设置 进度条到20%慢慢变到50%
        },
        complete: function(){
          // 设置 进度条到80%
        }
        success：function(){
          // 渲染页面
          // 进度到100%
        }
      });

Il s'agit simplement de la barre de progression que vous voyez à la surface, montrant la progression approximative, pas la progression réelle du chargement.

Recommandations associées ;

Partage de code pour implémenter la barre de progression du chargement de pages Web

Implémentation du canevas H5 d'un exemple de progression du chargement dynamique circulaire

Mise en place de la barre de progression du chargement des pages web HTML5/CSS3, de la barre de progression du téléchargement et d'autres cas classiques

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!