ajax operation layer occlusion page-JS Tutorial-php.cn

ajax operation layer occlusion page

php中世界最好的语言

Release： 2018-04-02 17:45:21

Original

1344 people have browsed it

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>

Copy after login

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; 
  }

Copy after login

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"); 
  }); 
});

Copy after login

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!