AJAX显示加载图层的实现方法

1

2

3

<div id="loading" class="loadingdiv">

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

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/*图片加载中div图层，用于遮挡页面*/

.loadingdiv

{

  position:absolute;

  text-align:center;

  left:0px;

  top:0px;

  z-index:70;

  background-color:#000000;

  opacity: 0.7;/*透明#CCCCCC*/

  display:none;

  }  

/*加载中图片*/

.loadingdiv img

{

  position:absolute;

  left:0px;

  top:0px;

  z-index:80;

  }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

//ajax请求过程中，显示加载中图片并显示图层，请求完成隐藏图片

$(function () {

  //注册ajax加载事件

  $("#loading").ajaxStart(function () {

    //一个div，用来遮挡页面，请求过程中，不可操作页面

    var lockwin = $(this);

    //div占满整个页面

    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 () {

    //隐藏div

    var lockwin = $(this);

    lockwin.css("width", "0");

    lockwin.css("display", "none");

    lockwin.css("height", "0");

    //设置图片隐藏

    $("#loading img").css("display", "none");

  });

});