Example of AJAX display loading and popping 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 us to have a more complete thinking 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 makes an AJAX request, if it is in the request stage for a long time, Failure to provide a user response will create an illusion for the user, causing the user 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 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"); 
  }); 
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.

Related articles:

Access to OA Use Ajax and workflow plug-ins to add OA accounts based on human resources system data (detailed graphic and text explanation)

The solution to the problem that the value of the Ajax submission parameter with the html tag cannot be submitted successfully

##The method of using ajax to submit the form in the Lavarel framework_AJAX related

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