AJAX affiche le chargement et affiche la page d'occlusion de couche

Cet article partage principalement avec vous que l'affichage AJAX se charge et que la page d'occlusion des couches apparaît. Tout le monde sait que les requêtes AJAX sont asynchrones. Ce mécanisme asynchrone nous apporte une optimisation de l'expérience, mais en même temps j'exige que nous ayons A. esprit plus complet pour gérer une entreprise. C'est une très mauvaise expérience utilisateur lorsque l'utilisateur ne répond pas pendant une longue période après avoir fait une demande, nous pouvons donc utiliser AJAX pour afficher le chargement et afficher la page d'occlusion de couche après la demande. Jetons un coup d'œil à la méthode d'implémentation. .

Avant-propos

Je pense que chaque développeur doit comprendre que lorsqu'un utilisateur fait une requête AJAX, s'il reste longtemps au stade de la requête sans donner de réponse à l'utilisateur, il donnera à l'utilisateur une fausse impression, faisant croire aux utilisateurs que notre système « ne répond pas ». D’une certaine manière, c’est hostile.

Parfois, même si les utilisateurs ne peuvent pas voir les résultats qu'ils souhaitent, ils continueront à faire des demandes, ce qui peut avoir des conséquences inattendues.

Ainsi, lors d'une requête AJAX, nous prenons certaines mesures pour garantir le bon fonctionnement du système et une bonne expérience utilisateur.

Ici, ce que j'utilise c'est : afficher l'image de chargement et faire apparaître un calque afin que l'utilisateur ne puisse pas faire une autre demande.

Méthode d'implémentation

Partie HTML :

<p id="loading" class="loadingp"> 
    <img src="images/data-loading.gif" alt="图片加载中···" /> 
</p>

La partie HTML n'a besoin que de placer un p, qui contient un img.

Style CSS :

/*图片加载中p图层，用于遮挡页面*/ 
.loadingp 
{ 
  position:absolute; 
  text-align:center; 
  left:0px; 
  top:0px; 
  z-index:70; 
  background-color:#000000; 
  opacity: 0.7;/*透明#CCCCCC*/ 
  display:none; 
  }   
/*加载中图片*/ 
.loadingp img 
{ 
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:80; 
  }

Paramètres de style pour p et img.

Code JS

//ajax请求过程中，显示加载中图片并显示图层，请求完成隐藏图片 
$(function () { 
  //注册ajax加载事件 
  $("#loading").ajaxStart(function () { 
    //一个p，用来遮挡页面，请求过程中，不可操作页面 
    var lockwin = $(this); 
    //p占满整个页面 
    lockwin.css("width", "100%"); 
    lockwin.css("display", "block"); 
    lockwin.css("height", $(window).height() + $(window).scrollTop()); 
    //设置图片居中 
    $("#loading img").css("display", "block"); 
    $("#loading img").css("left", ($(window).width() - 88) / 2); 
    $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2); 
  }); 
 
  $("#loading").ajaxStop(function () { 
    //隐藏p 
    var lockwin = $(this); 
    lockwin.css("width", "0"); 
    lockwin.css("display", "none"); 
    lockwin.css("height", "0"); 
    //设置图片隐藏 
    $("#loading img").css("display", "none"); 
  }); 
});

Recommandations associées :

jQuery Ajax affiche les bons et les mauvais nombres pour vérifier si le code de vérification d'entrée est correct

jquery+php+ajax affiche la progression du téléchargement de plusieurs images et génère un code miniature

JS et CSS réalisent le partage d'effets d'animation pendant le chargement de la page Web

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!