避免看到准备好文档的javascript更改_Javascript_Jquery_Dom_Onload_Jquery Deferred

避免看到准备好文档的javascript更改

javascript jquery dom

避免看到准备好文档的javascript更改,javascript,jquery,dom,onload,jquery-deferred,Javascript,Jquery,Dom,Onload,Jquery Deferred,我试图深入了解我为什么会看到以下情况，以及我如何解决这些问题：我在下面链接了一个测试页面，它的DOM非常小，我在页面上有一个元素，该元素的初始高度值完全是用CSS设置的，在doc ready上，会触发一个jQuery函数，为该元素指定一个新的高度值，我的问题是，当页面构建时，这种变化在视觉上是明显的，您可以看到元素很快从jQuery函数中获得新的高度值，我的目标是防止出现这种情况，因此当页面加载时，您只能看到带有jQuery高度值的元素。我原以为JavaScript render会阻止页面在浏

我试图深入了解我为什么会看到以下情况，以及我如何解决这些问题：

我在下面链接了一个测试页面，它的DOM非常小，我在页面上有一个元素，该元素的初始高度值完全是用CSS设置的，在doc ready上，会触发一个jQuery函数，为该元素指定一个新的高度值，我的问题是，当页面构建时，这种变化在视觉上是明显的，您可以看到元素很快从jQuery函数中获得新的高度值，我的目标是防止出现这种情况，因此当页面加载时，您只能看到带有jQuery高度值的元素。我原以为JavaScript render会阻止页面在浏览器中构建，直到所有doc就绪函数都启动，除非设置了异步或延迟，但现在我假设我错了

编辑：

澄清一下，这只是一个例子，我试图解决的问题与身高无关，我试图找到一个解决办法，解决我的jQuery在docready上应用CSS时存在视觉延迟的问题，并更好地理解延迟存在的原因

整个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>


html{
背景：#eee；
}
.盒子{
高度：64px；
宽度：50%；
最大宽度：280px；
最大宽度：1280px；
保证金：64px自动0自动；
位置：相对位置；
背景：#fff；
盒影：0.08em0.25em0 rgba（0,0,0,0.3）；
}    
jQuery（文档）.ready（函数（）{
函数调整框（）{
windowHeight=window.document.documentElement.clientHeight；
$（'.box'）.css（'height'，windowHeight*1/2）；
}   
调整框（）；
});

如果您想让该框占用户窗口高度的50%，可以使用CSS：

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

您的示例JavaScript在加载DOM后执行。这就是为什么加载页面后会看到

.box

高度调整。当您将

标记放在

中并且不使用

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
警报（'这会立即运行。甚至在文档被解析之前'）；
// 2
$（函数（）{
警报（“加载文档后将运行此命令”）；
});
// 2
$（文档）.ready（函数（）{
警报（“加载文档后将运行此命令”）；
});
// 3
$（窗口）。加载（函数（）{
警报（“当文档已加载且图像等资源已加载时，此命令将运行”）；
});
// 2
警报（“加载文档后将运行此命令”）；

注释为
```
1
```
：JS无法在此处操作文档，因为它尚未加载。您可以重定向或从服务器加载数据等
注释为
```
2
```
：这些基本相同。该文档已准备好由JS进行操作。但这并不意味着所有的资源都是可用的加载。您无法获得图像的准确高度
注释为
```
3
```
：如果需要获取图像的高度，请使用
```
$（窗口）。加载
```

如果您想让该框达到用户窗口高度的50%，可以使用CSS：
.box {
    height: 50vh; // vh => view-height
}

您的示例JavaScript在加载DOM后执行。
这就是为什么加载页面后会看到.box高度调整。
当您将
标记放在
中并且不使用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
警报（'这会立即运行。甚至在文档被解析之前'）；
// 2
$（函数（）{
警报（“加载文档后将运行此命令”）；
});
// 2
$（文档）.ready（函数（）{
警报（“加载文档后将运行此命令”）；
});
// 3
$（窗口）。加载（函数（）{
警报（“当文档已加载且图像等资源已加载时，此命令将运行”）；
});
// 2
警报（“加载文档后将运行此命令”）；


注释为1
：JS无法在此处操作文档，因为它尚未加载。您可以重定向或从服务器加载数据等
注释为2：这些基本相同。该文档已准备好由JS进行操作。但这并不意味着所有的资源都是可用的
加载。您无法获得图像的准确高度
注释为3
：如果需要获取图像的高度，请使用$（窗口）。加载

您可以执行类似于vue/angular/等的操作。。。并且有一个helper属性，您可以应用它来“隐藏”元素，直到它被完全处理
css
js
您可以执行类似于vue/angular/等的操作。。。并且有一个helper属性，您可以应用它来“隐藏”元素，直到它被完全处理
css
js
为什么不将CSS中的高度设置为50vh
？好吧，我应该澄清一下，这只是一个测试示例，我想了解的问题是如何防止javascript延迟在页面加载时在视觉上生效。您可以始终在中设置元素动画？？否则CSS是最好的方法，你的确切问题是什么，通常提供一个例子可以得到与你的需求不相关的答案。你不能阻止javascript运行的延迟。你可以使用一个加载覆盖并隐藏高度设置好后我的问题有点交叉，但高度示例非常接近我真正的代码问题，我一直在假设页面在应用doc-ready JS后在视口中呈现，而不是在应用doc-ready JS之后，所以听起来很简单