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

k5hmc34c 于 2022-11-03 发布在 jQuery

关注(0)|答案(5)|浏览(270)

我希望在整个页面加载之前显示加载条。现在，我只是使用了一个小的延迟：

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

页面已使用jQuery。
注：我已经尝试过了，但它对我不起作用：loading bar while the script runs
我也尝试过其他的解决方案。在大多数情况下，页面加载正常，或者页面根本不会加载/显示。

jquery

来源：https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded

5条答案

按热度按时间

q8l4jmvw1#

使用一个div #overlay和你的加载信息/ .gif，它将覆盖你的所有页面：

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

查询：

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

下面是一个带有加载条的示例：
我的天啊
第一个

赞(0）回复(0）举报 2022-11-03

thigvfpy2#

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>

Java脚本

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

CSS格式

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

DEMO的名字

赞(0）回复(0）举报 2022-11-03

64jmpszr3#

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

HTML格式

进行分割

<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>

赞(0）回复(0）举报 2022-11-03

1yjd4xko4#

我最近用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)});

基础知识

生成一个附加到<head>元素的<script>元素，其中包含任何所需样式。
生成一个<div>元素，作为覆盖层，附加到<body>元素之前。
生成一个<svg>元素，作为加载器，附加到以前生成的<div>元素之前。
在window.onload上，自动删除自生成的元素。

我的GitHub上提供了最新版本。

Demo（第一个字母）

| | | |
| - -|- -|- -|
|

|

|

|

设置

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

赞(0）回复(0）举报 2022-11-03

aiazj4mn5#

语义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）回复(0）举报 2022-11-03

我来回答

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

5条答案

HTML格式

Java脚本

CSS格式

DEMO的名字

基础知识

我的GitHub上提供了最新版本。

Demo（第一个字母）

设置

相关问题

热门标签

最新问答