Javascript 刷新浏览器或单击任何链接时，底部内容会跳起来

我正在开发一个具有全屏背景图像的（PHP/Wordpress）。我总是对背景图像有问题，我给出的高度计算用户查看的屏幕/窗口的高度，我的。加载它需要时间，当您在浏览器中单击“刷新”或单击任何链接时，可以看到底部的div。我可以为这些非微调器或加载栏使用任何页面转换吗？当页面加载或刷新时，我可以淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡。如何向用户隐藏所有这些加载问题？

在您的WP主题标题中，放置开始包装：

<div class="pageLoad">

---

您必须使用背景图像进行测试，但这应该足以让您开始。

为您的项目添加一个页面，以便我们可以看到您想要的内容链接中有一个完整的网站，那么您说添加页面是什么意思？只是一个建议，但是您是否尝试过将全屏背景容器的高度设置为视口的100%？像div{height:100vh；}我确实尝试过，但我不知道它不起作用，所以我选择通过JQuery查找高度。这不好吗？非常感谢你对我这样一个没有经验的人所作的详细解释。我不想使用微调器或加载图像，但您给了我一个如何使用渐变等过渡的想法，以便隐藏问题。我会尽快让你知道的。

</div>

<div class="buffer">
  <i class="fa fa-spinner fa-pulse"></i>
</div>

<div class="body">

<!-- put rest of page content, photos, etc here -->

</div>

var imgs = $(".pageLoad img")
var count = imgs.length;

$('.body').hide();

imgs.load(function() {
  count--;
  if (!count) {
        $('.body').show();
      $('.buffer').hide();
   }
}).filter(function() {
  return this.complete;
}).load();