javascript - 浏览器在使用 innerHTML 插入 Ajax 响应之前不更新文本

Question

我正在开发一个具有树状页面结构的 CMS，因此我正在尝试模拟用于浏览其 C 驱动器的 Windows 资源管理器。因此，最初我在根级别列出页面，并使用 onClick 事件和 AJAX，单击根页面将显示其下方的页面，在我为此创建/分配的 DIV 中。

一切正常，当 xmlhttp.send 正在运行时，我在另一个 DIV 中显示了一个动画加载 gif，当 if (xmlhttp.readyState==4 && xmlhttp.status==200) 是真的。

问题是当有大量子页面时(1,000 左右，是的，客户端创建了它们)，AJAX 完成并到达 document.getElementById(DivId).innerHTML = xmlhttp .responseText; 这会导致 gif 停止旋转。所以我用谷歌搜索了一下，这似乎是浏览器问题。

所以我想，我将在 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);
}

Answer 1

你真的应该使用一个框架。我最近使用 extjs 中内置的 ajax treeview 做了几乎相同的事情。相信我，这会让你省去很多麻烦。跨浏览器 dom 是一个 PITA。

我知道这不能回答您的具体问题，但请注意我的建议!

http://dev.sencha.com/deploy/dev/examples/tree/reorder.html