AJAX shows loading and pops up the layer occlusion page

This article mainly shares with you that AJAX displays loading and pops up the layer occlusion page. Everyone knows that AJAX requests are asynchronous. This asynchronous mechanism brings us experience optimization, but at the same time I require that we have A more complete mind to handle a business. It is a very bad user experience when the user does not respond for a long time after making a request, so we can use AJAX to display the loading and pop up the layer occlusion page after the request. Let's take a look at the implementation method.

Preface

I believe every developer should understand that when a user issues an AJAX request, if the user remains in the request stage for a long time without giving a user response, it will give the user an illusion. , causing users to think that our system is "unresponsive". This is unfriendly in a way.

Even sometimes, if users cannot see the desired results, they will keep making requests, which may have unexpected consequences.

So, when making an AJAX request, we take certain measures to ensure the correct operation of the system and a good user experience.

Here, what I use is: display the loading image and pop up a layer so that the user cannot make another request.

Implementation method

HTML part:

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

The HTML part only needs to place a p, which contains an img.

CSS style:

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

Style settings for p and 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"); 
  }); 
});

Related recommendations:

jQuery Ajax displays correct and incorrect numbers to verify whether the input verification code is correct

jquery+php+ajax displays the upload progress of multiple image uploads and generates thumbnail code

JS and CSS realize animation effect sharing during web page loading

The above is the detailed content of AJAX shows loading and pops up the layer occlusion page. For more information, please follow other related articles on the PHP Chinese website!