如何显示页面加载div，直到页面已完成加载?

我在我们的网站上有一个部分加载相当慢，因为它正在做一些密集的呼叫。

知道如何让div说类似于“loading”的东西吗?在页面准备好时显示，然后在一切准备就绪时消失?

792120 次浏览
小开

默认内容为display:none，然后有一个事件处理程序，在完全加载后将其设置为display:block或类似的内容。然后有一个div，设置为display:block，其中包含“Loading”，并在与之前相同的事件处理程序中将其设置为display:none。

小开

创建一个包含加载消息的<div>元素，给<div>一个ID，然后当你的内容完成加载时，隐藏<div>:

$("#myElement").css("display", "none");

.．.或者使用JavaScript:

document.getElementById("myElement").style.display = "none";
小开

好吧，这在很大程度上取决于你如何加载'密集调用'中所需的元素，我最初的想法是，你正在通过ajax进行这些加载。如果是这样的话，那么你可以使用'beforeSend'选项并像这样进行ajax调用:

$.ajax({
type: 'GET',
url: "some.php",
data: "name=John&location=Boston",


beforeSend: function(xhr){           <---- use this option here
$('.select_element_you_want_to_load_into').html('Loading...');
},


success: function(msg){
$('.select_element_you_want_to_load_into').html(msg);
}
});

<强>编辑 我明白了，在这种情况下，使用上面的'display:block'/'display:none'选项之一结合jQuery的$(document).ready(...)可能是正确的方法。$(document).ready()函数在执行(但它不会等待所有媒体加载)之前等待整个文档结构被加载。你可以这样做:

$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
小开

原来的答案

我需要这个，经过一些研究，我想出了这个(jQuery needed):

首先，在<body>标记之后添加这个:

<div id="loading">
<img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和图像的样式类添加到CSS中:

#loading {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}


#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}

然后，将这个javascript添加到你的页面(最好是在页面的末尾，当然是在结束</body>标记之前):

<script>
$(window).load(function() {
$('#loading').hide();
});
</script>

最后，用样式类调整加载图像的位置和加载div的background-color。

就是这个，应该没问题。当然，你应该在某个地方有一个ajax-loader.gif，或者使用base64 url作为image的src值。免费赠品在这里。(右击比;另存图像为…)

更新

对于jQuery 3.0及以上版本，您可以使用:

<script>
$(window).on('load', function () {
$('#loading').hide();
})
</script>

更新

最初的答案来自jQuery，在flexbox时代之前。你现在可以使用很多视图管理库/框架，比如Angular、React和Vue.js。对于CSS，你有flexbox选项。下面是CSS替代方案:

#loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}


#loading-image {
z-index: 100;
}
小开 

window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}


#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>

在JS中创建的最简单的渐隐效果的页面加载图像:

小开

基于@mehyaa的回答，但要简短得多:

HTML(就在<body>之后):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS:

#loading {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
/* 1/2 of the height and width of the actual gif */
margin: -16px 0 0 -16px;
z-index: 100;
}

Javascript (jQuery，因为我已经在使用它):

$(window).load(function() {
$('#loading').remove();
});
小开

下面是我最终使用的jQuery，它监视所有ajax的启动/停止，所以你不需要把它添加到每个ajax调用:

$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});

CSS为装载容器&content(主要来自mehyaa的回答)，以及hide类:

#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}


#loading-content {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
z-index: 100;
}


.hide{
display: none;
}

HTML:

<div id="loading" class="hide">
<div id="loading-content">
Loading...
</div>
</div>
小开

这个脚本将在页面加载时添加一个覆盖整个窗口的div。它将自动显示仅用于css的加载旋转器。它将等待窗口(而不是文档)完成加载，然后它将等待可选的额外几秒钟。

< p > < ul >
  • 使用jQuery 3(它有一个新的窗口加载事件)
  • 不需要图像，但很容易添加一个
  • 更改更多标记或说明的延迟
  • 唯一的依赖是jQuery。
    • < / ul > < / p >

    CSS加载器代码来自https://projects.lukehaas.me/css-loaders

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
}
            .loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loadingDiv {
position:absolute;;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
}
    This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.


<ul>
<li>Works with jQuery 3, which has a new window load event</li>
<li>No image needed but it's easy to add one</li>
<li>Change the delay for branding or instructions</li>
<li>Only dependency is jQuery.</li>
</ul>


Place the script below at the bottom of the body.


CSS loader code from https://projects.lukehaas.me/css-loaders


<!-- Place the script below at the bottom of the body -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    小开

    对于这个问题，我有另一个简单的解决方案，它对我来说非常有效。

    首先，创建一个名为锁住类的CSS，它是透明叠加的，并加载GIF，如下所示

    .LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

    现在我们需要用这个类创建我们的div，当页面加载时覆盖整个页面

    <div id="coverScreen"  class="LockOn">
</div>

    现在我们需要在页面准备好时隐藏这个封面屏幕，这样我们就可以限制用户点击/触发任何事件，直到页面准备好

    $(window).on('load', function () {
$("#coverScreen").hide();
});

    无论何时加载页面，上述解决方案都很好。

    现在的问题是在页面加载后，每当我们点击一个按钮或一个事件，这将花费很长时间，我们需要显示在客户端点击事件如下所示

    $("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

    这意味着当我们点击这个打印按钮(这将花费很长时间来给出报告)时，它将显示我们的封面屏幕与GIF，它会给出this结果，一旦页面准备好，上面的窗口加载函数将触发，并在屏幕完全加载时隐藏封面屏幕。

    小开

    我的博客会100%正常工作。

    function showLoader()
{
$(".loader").fadeIn("slow");
}
function hideLoader()
{
$(".loader").fadeOut("slow");
}
    .loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
    <div class="loader"></div>

    小开

    这将与api调用同步，当api调用被触发时，加载器将被显示。当api调用成功时，加载器将被移除。这可以用于页面加载或在api调用期间。

      $.ajax({
type: 'GET',
url: url,
async: true,
dataType: 'json',
beforeSend: function (xhr) {
$( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
$("html, body").animate( { scrollTop: $(document).height() }, 100);
},
success: function (jsonOptions) {
$('#searching-loader').remove();
.
.
}
});

    CSS

    .loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}


/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}


@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
    小开

    为drupal在你的主题 custom_theme。主题文件< / p > 

    function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

    在html.html.twig文件后跳过主体内容链接

    {% if preloader %}
<div id="test-preloader" >
<div id="preloader-inner" class="cssload-container">
<div class="wait-text">\{\{ 'Please wait...'|t }} </div>
<div class="cssload-item cssload-moon"></div>
</div>
</div>
{% endif %}

    在CSS文件中

    #test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}


.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 131px;
height: 131px;
background-color: #fff;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
}


.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
}
    小开

    我需要一个启动画面，我通过重用这里列出的部分解决方案来实现它。它使用Vanilla JS完全向后兼容。

    步骤1:在页面顶部添加一个旋转gif的背景，然后在加载所有内容时删除它们。

    body.has-js::before {
content: '';
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
height: 100vh;
width: 100vw;
pointer-events: none;
transition: all .2s;
background: white url('/img/spinner.gif') no-repeat center center / 50px;
}
body.loaded::before {
opacity: 0;
width: 0;
height: 0;
}

    步骤2:在开始主体标签后添加一个小脚本，开始显示加载/启动屏幕。

    <body>
<script>
// Only show loader if JS is available
document.body.className += ' has-js';
// Option 1: Hide loader when 'load' event fires
window.onload = function() { document.body.className += ' loaded'; }
// Option 2: Hide loader after 2 seconds, in case the 'load' event never fires
setTimeout(function(){ document.body.className += ' loaded'; }, 1000 * 2);
</script>
<!-- Page content goes after this -->
</body>

    提交答案