嗨, 我有一个网页,在其中使用ajax从另一个页面检索数据,同时在进行此操作时,我想在页面上显示一个加载gif动画,因此我创建了一个带有gif图像的div。
<div id="loading"><img src="images/loadinfo.net.gif" width="48" height="48" /></div>
这是我的CSS代码:
#content #loading {
visibility:hidden;
position: fixed;
width: 48px;
top: 0px;
}
现在我明白了,我所需要做的就是在我的加载内容的 AJAX 函数开始时将 loading div 的可见性设为 "visible",然后在结束时再将其隐藏。但是它并没有起作用,奇怪的是,如果我在 AJAX 函数开始时将 loading div 设为可见,然后立即将其隐藏,它就可以正常工作!!!
这是我的函数:
function ajaxpage(url, containerid) {
document.getElementById('loading').style.visibility = 'visible';
var bustcachevar = 1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects = ""
var rootdomain = "http://" + window.location.hostname
var bustcacheparameter = ""
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
} else
return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()
page_request.open('GET', url + bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
function loadobjs() {
if (!document.getElementById) return
for (i = 0; i < arguments.length; i++) {
var file = arguments[i]
var fileref = ""
if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js") != -1) { //If object is a js file
fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", file);
} else if (file.indexOf(".css") != -1) { //If object is a css file
fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref != "") {
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects += file + " " //Remember this object as being already added to page
}
}
document.getElementById('loading').style.visibility = 'hidden';
}