如何在页面完全加载之前将 jQuery 效果应用于元素？答案

【问题标题】：How to apply a jQuery effect to an element before page is fully loaded?如何在页面完全加载之前将 jQuery 效果应用于元素？
【发布时间】：2017-04-27 09:57:42
【问题描述】：

我想使用 jQuery 自定义元素的 height。 height 正在更改，但每次加载页面时都会显示效果（如闪烁效果）。如何解决这个问题？

$(document).ready(function() {
  $('.jQuery-Container').height('100px');
});

.jQuery-Container {
  background-color: Red;
  height: 700px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jQuery-Container">
  This is text..!!
</div>

在页面完全加载之后，div 的页面加载高度正在更改。我想在页面完全加载之前更改高度。

你可以看到我的jsfiddle here。

【问题讨论】：

你不能。必须先加载 DOM，然后 JS 才能对其执行任何指令。这就是为什么您会看到 FOUC（无样式内容的闪存）。为避免这种情况，请使用 CSS 更新 UI，因为这是在页面生命周期的早期应用的
@Rory McCrossan 是否有另一种方法可以实现这样的效果。我不能使用 css，因为效果取决于条件。所以需要改用jQuery。
视情况而定。你可以在整个 DOM 完全加载之前对元素运行 JS，只要你运行它的元素是完全加载的 - 但这会导致非常混乱/不可维护的代码，它不是推荐（但仍不确定是否能解决您的具体问题）。您没有提到服务器端技术 - 您可以根据页面呈现时的条件应用不同的类吗？

标签： javascript jquery css

【解决方案1】：

你可以这样做，在元素之后立即运行一个脚本，只要它是纯 javascript，它就可以工作。

.JS-Container {
  background-color: Red;
  height: 700px;
  width: 200px;
}

<head>
  <script>
    function changeThis(sel) {
      document.querySelector(sel).style.cssText = 'height: 100px;';
    }
  </script>
</head>
<body>

  <div class="JS-Container">
    This is a sample text
  </div>
  <script>changeThis('.JS-Container');</script> <!-- this will run before page is fully
                                                 loaded, so no "blink" will occur -->


</body>

【讨论】：

但是你已经做了两个divs。您正在更改文本，我想更改 div 的外观（仅在一个 div 中）
但是它是如何在运行时对元素进行更改的呢？
@RohitSharma 我再次更新了我的答案，显示了您完全相同的示例。 在运行时如何对元素进行更改是什么意思？
我对 JS 知之甚少，所以我只想知道它是如何工作的..？但是，没问题，现在我明白了你的答案。
抱歉，我试图在 DOM 准备好之前对元素应用 jQuery 效果..！我从您的回答中了解到，使用纯 javaScript 可能是可能的，但我认为它可能会降低页面渲染的速度。

【解决方案2】：

先让你的 div 隐藏，然后在你的 jquery 逻辑之后让 div 可见 CSS

.jQuery-Container {
  background-color: Red;
  height: 700px;
  width: 200px;
  display:none;
}

$(document).ready(function(){
    $('.jQuery-Container').height('100px').show();
});

【讨论】：