ajax operation layer occlusion page

This time I will bring you the ajax operation layer occlusion page. What are the precautions for the ajax operation layer occlusion page? The following is a practical case, let's take a look.

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 results they want, 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, It 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"); 
  }); 
});

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

How to operate Ajax to post request to jump page

Use Ajax to increase data based on human resources system OA account method

The above is the detailed content of ajax operation layer occlusion page. For more information, please follow other related articles on the PHP Chinese website!