Question

这是我的第一个php项目。我通过参考这篇文章来发现部分ajax回发：PHP AJAX SQL reference article

现在，我试图在部分加载开始时显示加载gif，并在部分加载完成时隐藏它。这是我在Javascript中使用的代码：

function showUser1(str) 
    {
        if (str == "") 
        {
            document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
            return;
        }
        else 
        { 
            document.getElementById("loadgif").style.visibility= "visible";
            if (window.XMLHttpRequest) 
            {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else 
            {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() 
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
                {
                    document.getElementById("outerpicwrapper").innerHTML = "";
                    document.getElementById("mems").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","getmembers.php?q2="+str,true);
            xmlhttp.send();
            document.getElementById("loadgif").style.visibility= "hidden";
        }
    }

在第一行中，我写道：

<img id="loadgif" src="img/loading.gif" class="loadinggif" />

在CSS文件中，我写道：

.loadinggif
{
position: absolute;
z-index: 200;
visibility: hidden;
}

代码工作正常并显示数据，但是没有显示加载gif。我甚至尝试过display：none和display：block代替可见性。请帮助。

Answer 1

问题是AJAX是异步的。因此，您的代码不会等待获取数据和

 document.getElementById("loadgif").style.visibility= "visible";
 document.getElementById("loadgif").style.visibility= "hidden";

这些行同时执行。

为了防止这种情况发生，你可以把

document.getElementById("loadgif").style.visibility= "hidden";

回调内部

function showUser1(str) 
{
    if (str == "") 
    {
        document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
        return;
    }
    else 
    { 
        document.getElementById("loadgif").style.visibility= "visible"; // This line displays the loading gif
        if (window.XMLHttpRequest) 
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else 
        {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() 
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
            {
                document.getElementById("outerpicwrapper").innerHTML = "";
                document.getElementById("mems").innerHTML = xmlhttp.responseText;
                document.getElementById("loadgif").style.visibility= "hidden"; // This line hides the loading gif
            }
        };
        xmlhttp.open("GET","getmembers.php?q2="+str,true);
        xmlhttp.send();
    }
}

Answer 2

最后，我使用JQuery使我的问题解决了。我刚刚在CSS中使用display：none并在加载gif div上调用了jquery的show（）函数。这个show函数是在javascript代码中编写的。

在PHP中加载Ajax Postback上的图标

2 个答案:

这些行同时执行。