Exemple de chargement d'affichage AJAX et d'affichage de la page d'occlusion de couche-js tutoriel-php.cn

Exemple de chargement d'affichage AJAX et d'affichage de la page d'occlusion de couche

亚连

Libérer： 2018-05-23 10:30:34

original

1949 Les gens l'ont consulté

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 une réflexion plus complète 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 est en phase de requête depuis longtemps le temps, le fait de ne pas fournir de réponse à l'utilisateur créera une illusion pour l'utilisateur, l'amenant à penser 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 de mise en œuvre

Partie HTML :

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

Copier après la connexion

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

Styles 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; 
  }

Copier après la connexion

Style 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"); 
  }); 
});

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. vous sera utile à l’avenir. Tout le monde est utile.