javascript - html页面在DOM操作过程中晃动很大,如何处理?

标签 javascript html dom

我使用DOM根据后端JSON数据对页面进行操作,比如页面上的一些表可能有10-50行数据,期间我看到页面晃动很大,看起来对用户不好, 有什么好的办法解决这个问题吗?

演示效果的代码是这样的...我中间有一张 table ,大小未知...

测试

window.onload = function(){
    setTimeout(createTable, 3000);
}


function createTable(){
    var table = document.createElement("table");
        for(var i = 0; i < 10; ++i){
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.innerHTML = "row " + i;

        tr.appendChild(td);

        table.appendChild(tr);
        }

        document.getElementById("tablewrapper").appendChild(table);

}
</script>
</head>
<body>
    <div style="width:300px; background-color:blue;">
       hello
    </div>

    <div id="tablewrapper">
    </div>

    <div style="width:300px;background-color:red">
    world
    </div>

</body>

最佳答案

通常您应该在其顶部放置一个加载 mask ,以便用户看不到晃动。

在大多数框架中,都有像 here 所描述的实用函数。对于 ExtJS 或作为 plugin对于 jQuery,但您可以轻松地自己完成(只需在您的区域或整个页面顶部放置一个 div,在代码完成后隐藏该 div)。

关于javascript - html页面在DOM操作过程中晃动很大,如何处理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12473785/

相关文章:

php - 在联系表单中实现 jQuery AJAX

javascript - Div 在 iframe 顶部,内部有 Silverlight

javascript - Firefox 页面加载事件很长

html - 我怎样才能更好地使用带有图像/边框的网格代码?

javascript - 如何使用 Javascript 分解 HTML 字符串中的每个单词,然后在 HTML 中一一显示每个单词?

dom - 选择 $(document).ready 中未定义的列表值

javascript - 自定义元素 - 扩展 HTMLElement 的命名冲突

javascript - Angular JS中的增量变量?

javascript - 使用 DOM - Javascript 生成 HTML 页面

javascript - 可以禁用 Kendo TimezoneEditor 吗?