在加载前创建可见的预加载器页面

Question

尝试在加载时复制预加载器page SVG和背景图像出现，一旦用户滚动页面滚动到内容并且页面加载器不可见或可以再次到达除非你刷新页面，不知道如何解决这个问题，任何帮助我指出正确方向的帮助都会很棒 - 我已经尝试过去理解这个页面了。

Answer 1

有几种方法可以实现这一点，一个简单的起点可能是这样的：

基本的html大纲：

<div id="loader">
LOADING Image/content
</div>

<div id="body">
website body
</div>

CSS

#body{display:none;}

的jQuery

$(document).ready(function(){
$("#loader").hide();
$("#body").show();
});

noscript fallback

<noscript>
<style>#loader{display:none;}#body{display:block !important;}</style>
</noscript>

基本上，这段代码有两个div加载器和body，body在CSS中设置为display none。当页面准备就绪时，触发jquery隐藏加载器并显示正文。

当禁用javascript时，noscript后退会将正文设置为可见。

有多种方法可以实现，这只是一个想法。

Answer 2

在一百种不同的方式中，我最初的想法是这样的：

• 将您的主要内容包裹在位置相对的包装中，并使其与顶部偏移100％的窗口宽度
• 使页面加载器100％高度和宽度以及位置固定
• 在页面完全加载之前偏移包装器，然后在页面加载后将其转换为0偏移

See a working jsfiddle here

Answer 3

1. 创建一个覆盖整个屏幕的元素（Div）。
2. 在它后面（较小的z-index）添加一个包含所有图像的Div容器。

3. 在JavaScript中添加一个加载事件函数到所有图像：

   image.onload = function（）{
   //图像已加载

   }

4. 加载所有图像时隐藏封面Div。

5. 如何知道所有图片何时加载？添加一个计数器或使用Promise。
6. 添加overflow：none以禁用滚动，并添加click事件或滚动事件（使用jQuery）并将overflow设置为auto。

有很多方法可以实现这些部分。