解决方法以防止看到文档就绪的 javascript 更改答案

【问题标题】：Work around to prevent seeing doc ready javascript changes解决方法以防止看到文档就绪的 javascript 更改
【发布时间】：2017-11-21 17:49:13
【问题描述】：

我试图深入了解为什么我会看到以下内容，以及如何解决它：

我有一个下面链接的测试页面，它有一个极小的 DOM，我在页面上有一个元素，它的初始高度值完全用 CSS 设置，在准备好文档时，一个 jQuery 函数会触发，它会为它分配一个新的高度值那个元素，我的问题是，当页面构建时，这种变化在视觉上很明显，你可以看到元素从 jQuery 函数中快速获得新的高度值，我的目标是防止这种情况，所以当页面加载时你只会看到具有 jQuery 高度值的元素。我认为 JavaScript 渲染会阻止页面在浏览器中构建，直到所有文档就绪函数都被触发，除非已设置异步或延迟，但现在我假设我错了。

编辑：

为了澄清，这只是一个例子，我试图解决的问题与高度无关，我试图找到一个解决方法，以解决我的 jQuery 应用 CSS 时存在视觉延迟的事实准备好文档，并更好地理解延迟存在的原因。

The test page link

整个 DOM：

 <style>
  html {
      background: #eee;
  }
  .box {
      height: 64px;
      width: 50%;
      max-width: 280px;
      max-width: 1280px;
      margin: 64px auto 0 auto;
      position: relative;
      background: #fff;
      box-shadow: 0 0.08em 0.25em 0 rgba(0,0,0,0.3);
  }    
</style>

<script type='text/javascript' src='[my path]/js/jquery-3.1.1.min.js?ver=3.1.1'></script>

<script type="text/javascript">
  jQuery(document).ready(function(){       
      function adjustBox() {
          windowHeight = window.document.documentElement.clientHeight;
          $('.box').css('height', windowHeight * 1/2);
      }   
      adjustBox();     
  });     
</script>

<div class="box"></div>

【问题讨论】：

为什么不把 CSS 中的高度设置为50vh？
好吧，我应该澄清一下，这只是一个测试示例，我想了解的问题是如何防止 javascript 在页面加载时延迟生效。
你总是可以为元素设置动画？？否则 CSS 是最好的方法，你的确切问题是什么，通常提供一个例子可以带来与你的需求不相关的答案。
您无法阻止 javascript 运行延迟。您可以使用加载叠加层并在设置高度后隐藏它
好吧，我的问题有点跨项目，但高度示例与我的真实代码问题相当接近，我一直在假设页面在文档准备好的 JS 后呈现在视口中的情况下进行编码已经应用了，而不是之后，所以听起来解决方案是主动的，并且避免了延迟造成问题的场景。对于我当前的项目，我可能只是将整个页面的淡入动画作为创可贴修复。

标签： javascript jquery dom onload jquery-deferred

【解决方案1】：

如果您希望该框占用户窗口高度的 50%，您可以使用 CSS 来实现：

.box {
    height: 50vh; // vh => view-height
}

您的示例 JavaScript 在 DOM 加载后执行。这就是为什么您在页面加载后看到 .box 高度调整的原因。将<script> 标记放在<head> 中并且不使用jQuery.ready() 函数时，可以在页面完全加载之前运行JS。

 <head>
    <script>
       // 1
       alert('this runs immediately. even before the document has been parsed');

       // 2
       $(function() {
           alert('this runs when the document has been loaded');
       });

       // 2
       $(document).ready(function(){
            alert('this runs when the document has been loaded');
       });

       // 3
       $(window).load(function(){
            alert('this runs when the document has been loaded AND resources like images has been loaded');
       });
    </script>
</head>
<body>
    <script>
        // 2
        alert('this runs when the document has been loaded');
    </script>
</body>

评论1：JS 无法在此处操作文档，因为它尚未加载。您可以进行重定向或从服务器加载数据等。
评论2：这些基本一样。该文档已准备好由 JS 操作。但这并不意味着所有资源都是加载。您无法获得图片的准确高度。
评论3：如果您需要获取图像的高度，您想使用$(window).load。

【讨论】：

我已经编辑了我的问题，以澄清这个问题与 jQuery 在 doc ready 上应用 CSS 的延迟有关，而不是我在 height 中使用的示例。
好吧，你回答了标题中的问题。 “防止文档准备好”。因此，只需从您的 JS 中删除 jQuery(document).ready。
好吧，如果我删除准备好的文档，代码不会触发？我是 JS/jQuery 的新手，但我认为它是必需的？
我更新了我的答案，举了一个 JS 何时执行的例子
我尝试了你建议的所有组合，将它包装在一个函数中或使用 doc ready 两者在视觉上显示高度变化的结果相同，在解析文档之前生效的方法导致 JS没有应用高度，这是有道理的，似乎唯一的解决方案是避免依赖创建 FOUSC 的页面加载 JS，感谢您的帮助！

【解决方案2】：

您可以执行类似于 vue/angular/etc... 的操作，并拥有一个辅助属性，您可以将其应用于“隐藏”元素，直到它被完全处理。

css

html {
  background: #eee;
}
[data-cloak] {
  display: none !important;
}
.box {
  height: 64px;
  width: 50%;
  max-width: 280px;
  max-width: 1280px;
  margin: 64px auto 0 auto;
  position: relative;
  background: #fff;
  box-shadow: 0 0.08em 0.25em 0 rgba(0,0,0,0.3);
}

jQuery(document).ready(function(){       
  function adjustBox() {
    windowHeight = window.document.documentElement.clientHeight;
    $('.box')
      .removeAttr('data-cloak')
      .css('height', windowHeight * 1/2);
  }   
  adjustBox();     
});

JSFiddle example

【讨论】：

我需要学习 JS 和那些牛逼的库的另一个原因。
是的，FOUSC 很难打，但是，至少有一些像这样的小技巧可以帮助驯服它。