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

问题描述 投票：0回答：6

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

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

该页面已使用 jQuery。

注意：我已经尝试过这个，但它对我不起作用：脚本运行时加载栏

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

javascript jquery progress-bar loading
6个回答
97
投票

使用 div 

#overlay
与您的加载信息/.gif 将覆盖您的所有页面：

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

这是一个带有 加载栏的示例：

const el = (sel, par) => (par || document).querySelector(sel);

function loadbar() {
  const elOverlay = el("#overlay");
  const elProgress = el("#progress");
  const elProgstat = el("#progstat");
  const images = document.images;
  const tot = images.length;
  let c = 0;
    
  if (tot == 0) return doneLoading();

  function imgLoaded() {
    c += 1;
    const perc = Math.floor(100 / tot * c) + "%";
    elProgress.style.width = perc;
    elProgstat.textContent = `Loading ${perc}`;
    if (c === tot) return doneLoading();
  }

  function doneLoading() {
    elOverlay.style.opacity = 0;
    setTimeout(() => {
      elOverlay.style.display = "none";
    }, 1200);
  }
  
  [...images].forEach(img => {
    const tmpImg = new Image();
    tmpImg.onload = imgLoaded;
    tmpImg.onerror = imgLoaded;
    tmpImg.src = img.src;
  });
}

addEventListener('DOMContentLoaded', loadbar, false);
* {
  margin: 0;
}

body {
  font: 200 16px/1 sans-serif;
}

img {
  max-height: 10rem;
}

#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="https://placehold.co/4000x4000/0bf/000/png" alt="Image 1 description">
  <img src="https://placehold.co/4000x4000/f0b/000/png" alt="Image 2 description">
  <img src="https://placehold.co/4000x4000/bf0/000/png" alt="Image 3 description">
</div>

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%;
}
​

演示

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>

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>
    元素之前。
  • On 
    window.onload
    自行生成的元素将被自动删除。

最新版本可在我的GitHub上获取。

演示

设置

let settings = {
    backgroundColor: "#2774ab",
    filterBrightness: 2,
    timeOnScreen: 100
}, //...
选项 描述 
backgroundColor
 请参阅MDN Web 文档颜色了解可接受的值。 background-color CSS 属性 设置元素的背景颜色。默认为 WordPress 深蓝色口音 #2774ab 
#2774ab
 
filterBrightness
 数字或百分比。 
svg
加载器元素的亮度（brightness() CSS 函数）。低于 
100%
的值会使装载机变暗，而高于 
100%
的值会使装载机变亮。插值的空白值是
1
。默认为 
2
。		 
timeOnScreen
 积极
integer
。屏幕上的时间附加到页面加载时间。默认为 
100
毫秒。
0
投票

语义 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');
0
投票

const el = (sel, par) => (par || document).querySelector(sel);

function loadbar() {
  const elOverlay = el("#overlay");
  const elProgress = el("#progress");
  const elProgstat = el("#progstat");
  const images = document.images;
  const tot = images.length;
  let c = 0;
    
  if (tot == 0) return doneLoading();

  function imgLoaded() {
    c += 1;
    const perc = Math.floor(100 / tot * c) + "%";
    elProgress.style.width = perc;
    elProgstat.textContent = `Loading ${perc}`;
    if (c === tot) return doneLoading();
  }

  function doneLoading() {
    elOverlay.style.opacity = 0;
    setTimeout(() => {
      elOverlay.style.display = "none";
    }, 1200);
  }
  
  [...images].forEach(img => {
    const tmpImg = new Image();
    tmpImg.onload = imgLoaded;
    tmpImg.onerror = imgLoaded;
    tmpImg.src = img.src;
  });
}

addEventListener('DOMContentLoaded', loadbar, false);
* {
  margin: 0;
}

body {
  font: 200 16px/1 sans-serif;
}

img {
  max-height: 10rem;
}

#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="https://placehold.co/4000x4000/0bf/000/png" alt="Image 1 description">
  <img src="https://placehold.co/4000x4000/f0b/000/png" alt="Image 2 description">
  <img src="https://placehold.co/4000x4000/bf0/000/png" alt="Image 3 description">
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.