我使用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/