Javascript 创建可见的加载前加载程序页面

尝试在加载SVG时复制预加载程序，并显示背景图像，一旦用户将页面滚动到内容，页面加载程序将不可见或无法再次访问，除非您刷新页面，但不确定如何解决此问题，任何能为我指明正确方向的帮助都将是巨大的——我已经尝试取消对上述页面的命名。

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

基本html大纲：

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

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

jQuery

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

noscript回退

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

#加载器{display:none；}#body{display:block！重要；}

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

禁用javascript时，noscript回退将主体设置为可见

---

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

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

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

创建一个覆盖整个屏幕的元素（Div）

在其后面（较小的z索引）添加一个包含所有图像的Div容器

在JavaScript中为所有图像添加加载事件函数：

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

}

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

如何知道何时加载所有图像？添加计数器或使用承诺

添加溢出：无以禁用滚动，添加单击事件或滚动事件（使用jQuery）并将溢出设置为自动

---

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

欢迎使用堆栈溢出。请告诉我们你的代码是什么样子以及你到目前为止一直在尝试什么。谢谢你，我看了一下小提琴，我希望页面加载器一直保持到用户通过点击事件或滚动事件启动为止，所以我只是在黑暗中摸索一下，我也会在js上附加一个事件监听器。？MichaelWhite是的，没错，用事件侦听器替换settimeout。

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