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

【问题标题】：showing a loading image when ajax start running in background当 ajax 开始在后台运行时显示加载图像
【发布时间】：2013-02-28 21:13:29
【问题描述】：

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

<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>

我不知道该怎么做，请有人帮助我。

【问题讨论】：

st() 是对脚本的函数调用，它开始执行一个页面 record.php，它从 ip camera 获取帧。
您正在引入一个不需要的全局 xmlhttp 并且您没有关闭字符串 http://localhost/IPCAM/start.php。 setTimeout 的首选语法是 setTimeout(function, timer) 而不是 (string, timer)。
抱歉这是我的错字，但是这个脚本运行良好并且成功录制了视频。只是现在我想在点击录制按钮时显示图像加载。这可能吗？跨度>

标签： php javascript jquery ajax radajaxloadingpanel

【解决方案1】：

首先我觉得你的问题很不清楚，但让我试试：

确保您有一个定义图像的 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.
});

【讨论】：

你的意思是addClass()？
@Archer 哦，是的，对不起。固定。
谢谢，这是否正是他所要求的应该是相当相关的:)

【解决方案2】：

添加一个 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>

【讨论】：

另外，字符串http://localhost/IPCAM/start.php 没有关闭。您的代码中也有一个全局变量xmlhttp。为什么不在xmlhttp.send() 之后开始动画呢？