javascript - 延迟显示新内容直到布局完成

Question

当动态更改 div 中的内容时，有没有办法延迟新内容的显示，直到所有布局完成？

我正在使用 javascript 和 ajax 来更新 div 的内容，当我插入 ajax 脚本返回的 html 时，它似乎在元素可见后对新内容进行布局，溢出目标 div

虽然这种情况发生得很快，而且最终结果也正是我希望的那样，但它确实会产生令人不快的“闪烁”，我想避免这种情况

JavaScript

      $requestURL = 'Scripts/getCategoryItems.php?Category='+$category+'&PageLength='+$pageLength+'&Page='+$page ;  
  AjaxRequest.open('GET',$requestURL,true);
    AjaxRequest.onreadystatechange = function()
      { if(AjaxRequest.readyState == 4)
        { 
          if (AjaxRequest.responseText !== 'false') 
          { TargetContainer.style.display = "none";
            TargetContainer.innerHTML=AjaxRequest.responseText;
            TargetContainer.style.display = "block";
          } else { alert(AjaxRequest.responseText); } ;
          document.body.className = '';
        }
      };
  document.body.className = 'waiting';
  AjaxRequest.send(); 

HTML:

<div id="Content" style="float:left; width:820px; height:550px; max-height:550px; color:#E0E0E0;  padding-top:30px; overflow:hidden;"></div>

Answer 1

您可以在准备就绪的文档中运行您的代码，以便在开始进行 ajax 调用之前完全加载文档。

编辑:或者，如果您不使用 jQuery，则使用 window.onload 事件。