JS页面在后台加载时显示动画

时间:2016-05-17 01:35:27

标签: javascript animation overlay

也许对下面的代码进行了简单的调整,但今天我的力量不在JS中。我的网站目前正在为各种任务重新加载index.php3。这些任务需要一些重要的数据库工作,并且在数据库准备PHP解析和呈现的数据时会出现明显的延迟。因此,我需要一种方法来在数据库工作和PHP解析时显示加载动画。以下是我迄今为止从网络和其他方面收集到的信息......

<html>
<head>
   <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>



<body onload="loadingAjax('myDiv');">

    <script>

    function loadingAjax(div_id)
    {
        $("#"+div_id).html('<center><img src="images/ajax-loader.gif"></center>');
        $.ajax({
            type: "POST",
            url: "index.php3",
            //data:         
            success: function(msg){
                $("#"+div_id).html(msg);
            }
        });
    }
    </script>


    <div id="myDiv"></div>

</body>
</html>

本质上,这个页面被加载,并显示一个动画gif,然后当加载index.php3时,它应该翻转显示index.php3。问题是它一旦加载就没有显示网站。

感谢大海捞针,对stackoverflow的帮助非常棒!

1 个答案:

答案 0 :(得分:0)

所以,我在这里用.done()方法更新了代码。

    function loadingAjax(div_id)
{
    $("#"+div_id).html('<center><img src="images/ajax-loader.gif"></center>');
     $.ajax({
        type: "POST",
        url: "index.php3",
          //data:
        }).done(function(msg){        
         $("#"+div_id).html(msg);
         //console.log("msg = [ "+ msg + " ]");
        });
    console.log("end of function");
}

done函数中唯一的一行不会用msg替换div_id,或者至少它不可见。