Javascript 在加载整个页面之前显示加载栏

我想在加载整个页面之前显示一个加载栏。现在，我只使用一个小延迟：

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

该页面已使用jQuery

注意：我尝试过这个，但对我无效：

我还尝试了其他解决方案。在大多数情况下，页面照常加载，否则页面根本不会加载/显示。

使用div

#overlay

和加载信息/gif覆盖所有页面：

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

---

下面是一个带有加载条的示例：

；（功能（）{
函数id（v）{return document.getElementById（v）；}
函数loadbar（）{
var ovrl=id（“覆盖”），
prog=id（“进度”），
stat=id（“progstat”），
img=document.images，
c=0，
tot=img.长度；
如果（tot==0）返回doneLoading（）；
函数imgLoaded（）{
c+=1；
var perc=（（100/tot*c）HTML
CSS
无论何时尝试加载此窗口中的任何数据，此gif都将加载

HTML

跳伞

<div class="loader"></div>

jQuery

$(window).load(function() {
        $(".loader").fadeOut("slow");
});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

$（窗口）.load（函数（）{
$（“.loader”）.fadeOut（“慢”）；
});

我最近用vanilla
.js
为一个项目制作了一个页面加载器，我只想分享它，因为所有其他答案都是基于jQuery的。它是一个即插即用、一行程序

它会自动创建一个
标记，该标记预先添加到
，并带有
加载程序。如果要自定义颜色，只需更新脚本开头的
t
变量即可

var t=“#106CF6”，u=document.querySelector（“*”），s=document.createElement（“样式”），a=document.createElement（“旁白”），m=”http://www.w3.org/2000/svg，g=document.createElements（m，“svg”），c=document.createElements（m，“圆圈”）；document.head.appendChild，（s.innerHTML=“#sealer{background:+t+”；color:+t+“显示：柔性；对齐项目：中心；对齐内容：中心；位置：固定；顶部：0；高度：100vh；宽度：100vw；z索引：2147483647}@keyframes sweel{to{transform:rotate（360deg）}}}}{sealer svg{animation:.3s sweel无限线性}”）、a.setAttribute（“id”、“sealer”）、document.body.prepend（a）、g.setAttribute（“高度”、“50”）、g.setAttribute（“过滤器”、“亮度（175%）”、g.setAttribute（“viewBox”、“0 0 100 100”）、a.prepend（g）、c.setAttribute（“cx”、“50”）、c.setAttribute（“cy”、“50”）、c.setAttribute（“r”、“35”）、c.setAttribute（“fill”、“none”）、c.setAttribute（“stroke”、“currentColor”）、c.setAttribute（“stroke dasharray”、“165 57”）、c.setAttribute（“stroke width”、“10”）、g.prepend（c），（u.style.pointerEvents=“none”）、（u.style.userSelect=”无“，（u.style.cursor=“wait”），window.addEventListener（“加载”，函数（）{setTimeout（function（）{（u.style.pointerEvents=“”），（u.style.userSelect=“”），（u.style.cursor=“”）；a.remove（）}，100}）

您可以在GitHub上看到语义UI也可能有所帮助，只需一行代码即可显示和隐藏加载图标

例如：

资料来源：

找到一个代码示例：

尽管上述代码示例的JS文件中有一个小的输入错误，但更正如下所示：

// ** Loader ON
$('#dimmer').dimmer('show');

// ** Loader OFF
// $('#dimmer').dimmer('hide');

你确定没有“副作用”吗？我记得。load（）编辑：我记得不太清楚，它不应该有任何副作用，我意识到这个答案有点陈旧，但我想知道如果用户禁用javascript，是否有一个解决方案可以很好地降低性能？因为目前他们只会加载一个gi对于一个网站来说，这是一个奇怪的问题，有很多观点，但没有对一个有用的问题进行投票answer@arandompenguin如果在开始时使用脚本加载图像，应该可以解决您的问题。@roko如何在第一页完全加载之前显示加载的gif？我有一个视差网站，我只想在第一页完全加载之前显示加载Iloaded。最佳和最简单的解决方案。如何在特定时间后停止加载程序？目前它不会一直停止和显示。相同的问题。它永远循环，无法停止。使用（“.loader”）.show（）；和（“.loader”）.hide（）；对于开始和停止页面加载时是否可以设置白色背景的不透明度？当前页面加载时显示白色背景和加载器。我想在加载时显示透明内容。请告诉我。加载器也不完全显示在页面中心。请对此提供帮助。
.content {display:none;}
.preload { 
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
}
​

<div class="loader"></div>

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://lkp.dispendik.surabaya.go.id/assets/loading.gif') 50% 50% no-repeat rgb(249,249,249);

$(window).load(function() {
        $(".loader").fadeOut("slow");
});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

// ** Loader ON
$('#dimmer').dimmer('show');

// ** Loader OFF
// $('#dimmer').dimmer('hide');