我对 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;
}
有很多方法...例如:您可以隐藏图像:
<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 库。
Bye!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)