AJAX-展示加载中并弹出图层遮挡页面

AJAX--显示加载中并弹出图层遮挡页面

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

到这里为止，我们就完成了这样的效果：发出AJAX请求，显示加载中图片，并弹出图层覆盖整个页面。

这里我搜集了一百张的loading动画图片，需要的可以下载一下！

点击打开链接

积分不过的可以email我啊！嘿嘿.