Ajax-Operationsschicht-Okklusionsseite

Dieses Mal bringe ich Ihnen die Seite zur Ajax-Operationsschicht-Okklusion. Was sind die Vorsichtsmaßnahmen für die Ajax-Operationsschicht-Okklusionsseite?

Vorwort

Ich glaube, jeder Entwickler sollte verstehen, dass sich ein Benutzer, wenn er eine AJAX-Anfrage stellt, lange in der Anfragephase befindet Wenn dem Benutzer keine Antwort zur Verfügung gestellt wird, entsteht eine Illusion für den Benutzer, die den Benutzer glauben lässt, dass unser System „nicht reagiert“. Das ist in gewisser Weise unfreundlich.

Manchmal stellen Benutzer weiterhin Anfragen, auch wenn sie nicht die gewünschten Ergebnisse sehen können, was unerwartete Folgen haben kann.

Wenn wir also eine AJAX-Anfrage stellen, ergreifen wir bestimmte Maßnahmen, um den korrekten Betrieb des Systems und eine gute Benutzererfahrung sicherzustellen.

Hier verwende ich Folgendes: Zeigen Sie das Ladebild an und öffnen Sie eine Ebene, damit der Benutzer keine weitere Anfrage stellen kann.

Implementierungsmethode

HTML-Teil:

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

Der HTML-Teil muss nur Platzieren Sie ein p, das ein Bild enthält.

CSS-Stil:

/*图片加载中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; 
  }

Stil p und img.

JS-Code

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So bedienen Sie Ajax, um eine Anfrage zur Sprungseite zu posten

Verwenden Sie Ajax, um Daten basierend auf zu erhöhen Personalsystem OA-Kontomethode

Das obige ist der detaillierte Inhalt vonAjax-Operationsschicht-Okklusionsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!