php - 将加载 gif 添加到简单脚本中

Question

我对 Javascript 真的很陌生，但我已经有了这个加载 url 内容的脚本，一切正常。我使用按钮上的 onClick 方法调用 plannerSpin 函数，但是在这一切发生的同时我将如何显示动画 gif？

var xmlHttp
function plannerSpin(str) {
    xmlHttp = GetXmlHttpObject()
    if (xmlHttp == null) {
        alert("Browser does not support HTTP Request")
        return
    }
    var url = "/recipes/planner/data"
    xmlHttp.onreadystatechange = stateChanged
    xmlHttp.open("GET", url, true)
    xmlHttp.send(null)
}
function stateChanged() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText
    }
}
function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

Answer 1

有很多方法...例如:您可以隐藏图像:

<div id='loading' style='display:none'><img src='img.gif'></div>

并在启动 AJAX 请求后立即显示:

document.getElementById('loading').style.display = 'inline';

然后，请求完成后再次隐藏图像:

if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
    document.getElementById('loading').style.display = 'none';
    document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText;
}   

或者，您可以使用 jQuery、Prototype、Mootools 或任何您想要的 JS 库。

再见!