在整个页面加载完成之前显示加载条

Question

在整个页面加载完成之前显示加载条

60

我想在整个页面加载完成前显示一个加载进度条。目前，我只是使用了一个小延迟：

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

该页面已经使用了jQuery。

注意：我已经尝试过这个方法，但对我没有起作用：在脚本运行时显示加载条

我还尝试过其他解决方案。在大多数情况下，页面会像往常一样加载，或者根本不会加载/显示。

- Key-Six

5个回答

25

HTML

<div class="preload">
<img src="http://i.imgur.com/KUJoe.gif">
</div>

<div class="content">
I would like to display a loading bar before the entire page is loaded. 
</div>

JavaScript

$(function() {
    $(".preload").fadeOut(2000, function() {
        $(".content").fadeIn(1000);        
    });
});

CSS

.content {display:none;}
.preload { 
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
}

演示

- Okan Kocyigit

在页面加载时，是否可以设置白色背景的不透明度？目前它在页面加载期间显示白色背景和加载器。我想在加载期间显示透明内容。请告诉我。 - RK Ahir

同时，加载器未在页面中心精确显示，请也为此提供帮助。 - RK Ahir

11

每当您尝试在此窗口加载任何数据时，将加载此gif。

HTML

创建一个Div

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

CSS

.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);
}

jQuery

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

- Inamur Rahman

2

最佳且最简单的解决方案。 - Darshan Jain

1

如何在特定时间后停止加载器？目前它没有停止并一直显示。 - RK Ahir

1

同样的问题。它一直循环，无法停止。 - Smooth Neon

1

使用(".loader").show();和(".loader").hide();来启动和停止。 - Snack'Eyes

5

我最近在一个项目中使用VanillaJS制作了一个页面加载器，想分享一下，因为其他的答案都是基于jQuery的。这个加载器是即插即用的，只需要一行代码。

let settings={backgroundColor:"#2774ab",filterBrightness:2,timeOnScreen:100},u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("div"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),s.innerHTML="@keyframes swell{to{transform:rotate(360deg)}}",a.setAttribute("style","background-color:"+settings.backgroundColor+";color:"+settings.backgroundColor+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647"),document.body.prepend(a),g.setAttribute("style","height:50px;filter:brightness("+settings.filterBrightness+");animation:.3s swell infinite linear"),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="none",u.style.cursor="wait",window.onload=(()=>{setTimeout(()=>{u.style.pointerEvents="",u.style.userSelect="",u.style.cursor="",a.remove()},settings.timeOnScreen)});

基础

创建一个<script>元素添加到<head>元素中，包含所需的任何样式。
生成一个<div>元素作为叠加层，插入到<body>元素前面。
生成一个<svg>元素作为加载器，插入到先前生成的<div>元素前面。
在window.onload上自动生成元素会被自动删除。

最新版本可在我的GitHub上找到。

演示

设置

let settings = {
    backgroundColor: "#2774ab",
    filterBrightness: 2,
    timeOnScreen: 100
}, //...

选项	描述
`backgroundColor`	参考MDN Web Docs颜色获取可接受的值。 background-color CSS属性设置元素的背景颜色。默认为WordPress深蓝色强调 `#2774ab`
`filterBrightness`	数字或百分比。 `svg`加载器元素的亮度（brightness() CSS函数）。小于`100％`的值使加载器变暗，而大于`100％`的值使其更亮。插值的lacuna值为`1`。默认为`2`。
`timeOnScreen`	正整数。屏幕上的时间添加到页面加载时间中。默认为`100`毫秒。

- amarinediary

0

Semantic UI 可能也会有所帮助，只需简单的一行代码即可显示和隐藏加载图标。

例如：<div class="ui active centered inline loader"></div>

来源：https://semantic-ui.com/elements/loader.html

找到了一个代码示例：https://codepen.io/fujiyamayuta/pen/JBxxJO

虽然上述代码示例的 JS 文件中有一个小错误，但已经进行了更正，如下所示：

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

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

- BuddhaWithT-Rex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

使用一个具有加载信息/ .gif 的 div ＃overlay ，它将覆盖您的整个页面：

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

jQuery：

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

这里有一个带有加载进度条的例子：

jsBin演示

;(function(){
  function id(v){ return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());

*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;                /* will be increased by JS */
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

<div id="container">
  <img src="http://placehold.it/3000x3000/cf5">
</div>