AJAX zeigt den Ladevorgang an und öffnet die Seite zur Ebenenverdeckung

Dieser Artikel teilt Ihnen hauptsächlich mit, dass die AJAX-Anzeige geladen wird und die Layer-Okklusionsseite angezeigt wird. Jeder weiß, dass AJAX-Anfragen asynchron sind. Dieser asynchrone Mechanismus bringt uns eine Erfahrungsoptimierung, aber gleichzeitig benötige ich A vollständigerer Geist, um ein Geschäft zu führen. 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, dass jeder Entwickler verstehen sollte, dass, wenn ein Benutzer eine AJAX-Anfrage stellt und diese längere Zeit in der Anforderungsphase verbleibt, ohne eine Benutzerantwort zu geben, der Benutzer eine Antwort erhält eine Illusion, die 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> 
    <img  src="/static/imghwm/default1.png" data-src="images/data-loading.gif" class="lazy" alt="AJAX zeigt den Ladevorgang an und öffnet die Seite zur Ebenenverdeckung" > 
</p>

Der HTML-Teil muss nur ein p platzieren, 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; 
  }

Stileinstellungen für 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"); 
  }); 
});

Verwandte Empfehlungen:

jQuery Ajax zeigt richtige und falsche Zahlen an, um zu überprüfen, ob der Eingabebestätigungscode korrekt ist

jquery+php+ajax zeigt den Upload-Fortschritt mehrerer Bild-Uploads an und generiert Miniaturbildcode

JS und CSS realisieren die gemeinsame Nutzung von Animationseffekten während des Ladens der Webseite

Das obige ist der detaillierte Inhalt vonAJAX zeigt den Ladevorgang an und öffnet die Seite zur Ebenenverdeckung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!