Beispiel für das Laden der AJAX-Anzeige und das Öffnen der Layer-Okklusionsseite

Jeder weiß, dass AJAX-Anfragen asynchron sind. Dieser asynchrone Mechanismus bringt uns eine Optimierung der Erfahrung, aber gleichzeitig verlange ich von uns, dass wir ein umfassenderes Denken haben, um ein Geschäft abzuwickeln. Es ist eine sehr schlechte Benutzererfahrung, wenn der Benutzer nach einer Anfrage lange Zeit nicht antwortet. Daher können wir AJAX verwenden, um den Ladevorgang anzuzeigen und die Layer-Okklusionsseite nach der Anfrage aufzurufen. Schauen wir uns die Implementierungsmethode an .

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>

Im HTML-Teil muss nur ein p platziert werden, 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"); 
  }); 
});

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es so sein wird nützlich für Sie in der Zukunft.

Verwandte Artikel:

Zugriff auf OA mithilfe von Ajax und Workflow-Plug-Ins zum Hinzufügen von OA-Konten basierend auf Personalsystemdaten (detaillierte Grafik- und Texterklärung)

Die Lösung für das Problem, dass der Ajax-Übermittlungsparameterwert das HTML-Tag enthält und nicht erfolgreich übermittelt werden kann

Die Methode zur Verwendung von Ajax um das Formular im Lavarel-Framework einzureichen_AJAX bezogen

Das obige ist der detaillierte Inhalt vonBeispiel für das Laden der AJAX-Anzeige und das Öffnen der Layer-Okklusionsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!