Показывает загрузочное изображение, когда 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

Для начала я нахожу ваш вопрос очень неясным, но позвольте мне попробовать:

Убедитесь, что у вас есть класс 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.
});

Answer 2

Добавьте div с идентификатором loadingDiv и измените свой код на этот

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