延迟显示新内容直到布局完成答案

【问题标题】：Delaying display of the new content until layout is complete延迟显示新内容直到布局完成
【发布时间】：2016-01-26 13:09:04
【问题描述】：

当动态更改 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>

【问题讨论】：

请将您的代码添加到问题中。

标签： javascript html ajax dom

【解决方案1】：

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

编辑：或者如果你没有使用 jQuery，那么 window.onload 事件。

【讨论】：

ajax 调用是为了响应用户交互，因此文档已完全加载
好的，如果是这种情况，那么查看用于加载闪烁的文档部分的代码会很有帮助。例如，如果您正在使用 jQuery 的淡入淡出之类的东西，那么您可以使用一个回调。我并不是说您正在使用淡入淡出，但我要说的是您希望在 ajax 与帮助您找到解决方案相关之前同步运行的代码。
直接使用 javascript、html 和 php。在 ajax 调用之前没有代码运行，页面是静态的，显示一系列图像。当用户选择不同的类别时，将进行 ajax 调用，并且显示 div 的 innerhtml 被替换为一系列新图像的 html