使用jQuery向页面添加Loading提示框

类别：Web开发技术 / 日期：2014-12-30 / 浏览：2059 / 评论：0

突然之间的需求就是在执行AJAX请求的时候增加一个Loading框，本来很简单的功能，可是Baidu了很久也没有一个特别完美的方案，经过Google和Baidu的结果的结合，找到了一个简单的解决方法。 首先需要一个Loading的图片，我找到了一个简单的gif图片，我们的需求就是提交AJAX请求的时候，再居中显示这个Loading的图片，收到数据以后让图片消失。我们先在页面中加入一个空的div，用于显示图片。

<div id="spinner" class="spinner"></div>

接下来，我们设置div的样式。

<style type="text/css">
        .spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px; 
            text-align: center;
            z-index: 1234;
            overflow: auto;
            width: 100px; 
            height: 102px; 
        }
</style>

最后写一段脚本来控制图片的显示和清除。

    $(function () {
        $(document).ajaxStart(function () {
            $("#spinner").html("<img src='/Images/ajax-loader.gif' />");
        }).ajaxStop(function () {
            $("#spinner").html("");
        });
    });

上述代码主要的功能就是在启动Ajax请求的时候让设置DIV中的内容去显示我们设置的gif图片，在ajax请求完成后清除DIV中设置的内容。