Question

我正在制作“正在加载”屏幕，在页面高度超过100％之前，它都可以正常工作。

Css

.Loading {
  position: absolute;
  left: 0;
  top:0;
  background-color: #141414;
  width: 100%;
  height: 100%;
  z-index: 1;
 }

如何检测所有屏幕的实际高度？还是制作加载屏幕的最佳方法是什么？

jQuery //如果需要

$(document).ready(function(){
  RemoveLoader(); 
});

function RemoveLoader(){
  $(".Loading").animate({opacity:"0"},"slow",function(){
     $(".Loading").remove();
   });
 }

Answer 1

您可以选择从页面中删除滚动条。

默认情况下，您可以在主体中定义overflow:hidden;，并且在删除加载程序时也要删除主体样式属性。

该演示位于摘要中，您可以查看。

$(document).ready(function(){
  RemoveLoader(); 
});

function RemoveLoader(){
  $(".Loading").animate({opacity:"0"},"slow",function(){
   $(".Loading").remove();
   $('body').removeAttr('style');
 });
}

.Loading{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: gray;
}

<body style="overflow: hidden;">
  <div class="Loading"></div>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

谢谢...

Answer 2

不久前，我学会了这种CSS黑客攻击。

您可以使用VH和VW作为测量值：

宽度：100vw；高度：100vh；

如何知道屏幕的高度？用于加载屏幕

2 个答案: