在加载div之前，禁止加载div（由jquery确定的填充视口的高度）下方的html内容

我得到了一些帮助，使用jquery和我的引导html结构获得了一个div来填充视口高度

你无法在小提琴中真正判断问题是什么，但当我在web浏览器中加载我的真实页面时，#resident div直接显示在页眉下几秒钟，而jquery正在确定视口高度，最后页面正确加载，并且#resident内容位于折叠的下方

显然，这一切都发生在一秒钟或更短的时间内，但它丑陋、烦人、令人分心。在确定巨型机高度之前，如何防止#jumbo div下面的html加载？还是我应该用其他方式来思考这个问题

这是jquery

$(document).ready(function() {
  function adjustJumboHeight() {
    var headerHeight = $("#headerContainer").outerHeight();
    var viewportHeight = $(window).innerHeight();
    var remains = viewportHeight - headerHeight;
    $("#jumbo").css({
      "height": remains
    });
  }
  // On page load
  adjustJumboHeight();
  // on resize (or mobile orientation change)
  $(window).on("resize", function() {
    adjustJumboHeight();
  });
});

这是我的引导程序4 html:

<div id="headerContainer" class="container-fluid">
  <header class="row row-eq-height">
    <div id="logo" class="col-md-3">
      <img src="https://i.pinimg.com/originals/8b/58/61/8b5861d8fa21ae898d776631a587acb8.jpg">
    </div>
    <!--logo-->
  </header>
  <!--header-->
</div>
<!--headerContainer-->
<div id="jumbo" class="row"></div>
<div id="remainder">
  <h1>I don't want this content to show till the #jumbo div has fully loaded</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, tortor ac tincidunt mattis, risus justo rutrum nulla, ac porttitor massa augue at est. Aenean pretium ligula at nunc viverra, at lacinia risus lobortis. Curabitur neque leo, tempus
    quis sollicitudin vitae, viverra in libero. Curabitur hendrerit dignissim maximus. Aliquam eu leo vel libero accumsan posuere. Ut rutrum porta leo eu efficitur. Morbi at orci in neque sodales consectetur sit amet et urna. Cras ex ante, varius nec
    tellus in, dictum sagittis mi.</p>
  <p>Proin fermentum tortor sed rhoncus gravida. Etiam sagittis lectus et nisi facilisis, sed cursus lectus tincidunt. Etiam ac risus ut neque interdum accumsan. Maecenas id convallis nibh. Curabitur dapibus eleifend justo, vel porta arcu tempus nec. Quisque mattis sollicitudin quam, id congue nisi pulvinar a. Phasellus eu scelerisque elit. Duis at condimentum erat. Donec in hendrerit tortor.</p>
</div>

我不希望在巨型div完全加载之前显示此内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。普罗恩·迪特、马蒂斯、努拉、马萨·奥古斯在东部的港口。在努克维韦拉，在拉西尼亚里苏斯洛博蒂斯的埃尼亚普雷蒂姆舌苔。坦帕斯，内克利奥库拉比图酒店
奎斯·索利西图丁·维塔伊，自由女神维韦拉。大名鼎鼎的库拉比图尔·亨德雷特。这是一个很好的例子。这是欧盟效率之门。莫比在奥基的圣殿里坐着阿梅特和乌尔纳。CRA事前，varius nec
电视在，人字名言在

妊娠期斜纹夜蛾酵素原。矢状面和面神经的运动，是指矢状面和面神经的运动。这是一个积累的过程。梅塞纳斯，我相信是尼布。这是一种新的生活方式。我的名字叫奎斯·马蒂斯·索利西图丁·奎姆。Phasellus eu权杖精英。酒后驾车在调味品店。Donec在hendrerit tortor

您所经历的被称为FOUC（未格式化内容的Flash）。当css在javascript之前加载时会发生这种情况

（请在此阅读更多信息：）

有一些解决方法，例如使用预加载程序图标或在github上使用以下代码：

.no fouc{显示：无；}
document.documentElement.className='no fouc'；
//添加到文档就绪：$（'.no-fouc'）.removeClass（'no-fouc'）；

---

解决问题的另一种方法是在.css文件中设置css类/id（正在闪烁的）

display:none

，然后在JQuery加载事件中设置

display:inline

。

您所经历的被称为FOUC（未格式化内容的闪烁）。当css在javascript之前加载时会发生这种情况

（请在此阅读更多信息：）

有一些解决方法，例如使用预加载程序图标或在github上使用以下代码：

.no fouc{显示：无；}
document.documentElement.className='no fouc'；
//添加到文档就绪：$（'.no-fouc'）.removeClass（'no-fouc'）；

---

解决问题的另一种方法是在.css文件中设置css类/id（正在闪烁的）

display:none

，然后在JQuery加载事件中设置

display:inline

。

在呈现页面上部后，可以通过ajax请求加载

的内容

保持空的

<div id="remainder"></div>

并且，对javascript函数进行以下更改

$(document).ready(function(){
    function adjustJumboHeight(){
       ... your code

       // add following three lines
       $.get('<URL>', function(data) {
          $('#remainder').html(data);
       });
}

$（文档）.ready（函数（）{
功能调整重锤（）{
…您的代码
//添加以下三行
$.get（“”，函数（数据）{
$（'#余数'）.html（数据）；
});
}

在呈现页面上部后，可以通过ajax请求加载

的内容

保持空的

<div id="remainder"></div>

并且，对javascript函数进行以下更改

$(document).ready(function(){
    function adjustJumboHeight(){
       ... your code

       // add following three lines
       $.get('<URL>', function(data) {
          $('#remainder').html(data);
       });
}

$（文档）.ready（函数（）{
功能调整重锤（）{
…您的代码
//添加以下三行
$.get（“”，函数（数据）{
$（'#余数'）.html（数据）；
});
}

将

不透明度：0

放入

#jumbo

的css中

#jumbo{
  opacity: 0;
}

然后在javascript函数内部设置

opacity:1

，如

function adjustJumboHeight() {
  var headerHeight = $("#headerContainer").outerHeight();
  var viewportHeight = $(window).innerHeight();
  var remains = viewportHeight - headerHeight;
  $("#jumbo").css({
    "height": remains,
    "opacity": 1
  });
}

---

将

opacity:0

放入

#jumbo

的css中

#jumbo{
  opacity: 0;
}

然后在javascript函数内部设置

opacity:1

，如

function adjustJumboHeight() {
  var headerHeight = $("#headerContainer").outerHeight();
  var viewportHeight = $(window).innerHeight();
  var remains = viewportHeight - headerHeight;
  $("#jumbo").css({
    "height": remains,
    "opacity": 1
  });
}

---

您的文本会短暂地显示在图像的位置，因为图像仍在加载，而其容器的大小为0，直到加载时才取其计算大小。这意味着您需要在图像容器的CSS中固定大小，以保持其大小，即使图像仍在加载。您好，我注意到您的问题仍然没有标记的解决方案n、 这是因为您只是忘记了还是您的问题仍然没有得到回答？我很乐意帮助您进一步处理您的案例，否则请将此问题标记为已解决，因为它有助于其他用户更好地体验stackoverflow。您的文本会短暂地显示在图像的位置，因为图像仍在加载，而其容器大小为0，直到加载为止。这意味着您需要固定图像容器CSS中的大小，以便在图像仍在加载时保持其大小。您好，我注意到您的问题仍然没有标记的解决方案。这是因为您忘记了还是您的问题仍然没有得到回答？我很乐意帮助您进一步解决您的情况，其他请将此问题标记为已解决，因为它有助于其他用户更好地体验stackoverflow。