我正在研究一个具有页面结构树的CMS,因此我试图模拟用于浏览其C驱动器的Windows资源管理器。因此,最初我在根级别列出页面,并使用onClick事件和AJAX,单击根页面将显示下面的页面,在我创建/分配的DIV中。在使用innerHTML插入Ajax响应之前,浏览器不更新文本
所有工作正常,我有一个动画加载gif显示在另一个DIV而xmlhttp.send正在运行,当if (xmlhttp.readyState==4 && xmlhttp.status==200)
为真时关闭。
问题是,当有大量的子页面(1000左右,是的,客户端创建它们),AJAX完成,它得到document.getElementById(DivId).innerHTML = xmlhttp.responseText;
,这导致gif停止旋转。所以我GOOGLE了,看来这是一个浏览器问题。
所以我想,我会在AJAX调用期间使用gif,并在浏览器呈现新的innerHTML时显示等待文本。然而,尽管需要几秒钟,但这段文字永远不会被显示出来,我只能看到冻结的gif,然后一次渲染完成的文本。
如果我将“完成”行注释掉,等待文本确实会显示。
的代码如下:
function getPages(page_id, DivId)
{
var loadingicon_div = "page_" + page_id + "_loadingicon";
var loading_icon = 'image here, not allowed to post images..';
document.getElementById(loadingicon_div).innerHTML = loading_icon;
xmlhttp = new GetXmlHttpObject();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById(loadingicon_div).innerHTML = "Retrieved pages from the server, please wait while your browser displays them ...";
document.getElementById(DivId).innerHTML = xmlhttp.responseText;
document.getElementById(DivId).style.padding="5px";
document.getElementById(loadingicon_div).innerHTML = "done";
}
}
var url="tree_ajax.php";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
感谢拜伦是exjs像jQuery libary?看着这些是我的下一个清单 – KevInSol 2011-02-03 19:50:21
是的,就像jquery,但更全功能。这是你可以在其中做的事情。 http://dev.sencha.com/deploy/dev/examples/ – 2011-02-03 20:28:15