php - 当 ajax 开始在后台运行时显示加载图像

Question

当我单击记录按钮时，我有以下脚本开始运行。我想在单击记录按钮时显示图像，这与我们上传图像时通常显示的相同...这是脚本：

<script>
function st()
{
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        alert('RECORDING Start');
        }

    }
    xmlhttp.open('GET','http://localhost/IPCAM/start.php;)

    xmlhttp.send();

setTimeout('st()',5000);
}
</script> 

当我单击此按钮时，该按钮将启动 ajax 后台。

<button OnClick="st()">Record</button>

我不知道这样做，请有人帮助我。

Answer 1

添加一个 id 为 loadingDiv 的 div 并将您的代码更改为此

<script>
function st()
{
                        if (window.XMLHttpRequest)
                        {
                            xmlhttp=new XMLHttpRequest();
                        }
                        else
                        {
                            xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                        }
                        xmlhttp.onreadystatechange=function()
                        {
                            if (xmlhttp.readyState==1)
                            {
                            document.getElementById("loadingDiv").innerHTML = "<img src='loading.gif'/>";
                            }
                            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                            {
                            alert('RECORDING Start');
                            }

                        }
                        xmlhttp.open('GET','http://localhost/IPCAM/start.php;

                        xmlhttp.send();

setTimeout('st()',5000);
}
</script> 

Answer 2

首先，我发现您的问题非常不清楚，但让我试试：

确保您有一个定义图像的 css 类：

.recordingBackground
{
    background-image: url("record.png");
}

（或者只使用javascript）

创建按钮：

<input type="button" id="recordButton" value="Record" />

让 jQuery 监听按钮，您可以将类添加到元素中：

$('#recordButton').live("click", function()
{
    $('#background').addClass('recordingBackground');
    // Or use a similar method (for example: pure javascript).
    // #background is just an example div.
});