如何在页面加载完成之前显示页面加载 div？
Posted
技术标签:
【中文标题】如何在页面加载完成之前显示页面加载 div？【英文标题】：How to show Page Loading div until the page has finished loading? 【发布时间】：2010-12-23 15:28:04 【问题描述】：我的网站上有一个部分加载非常缓慢，因为它正在执行一些密集的呼叫。
知道如何让div 说出类似于“正在加载”的内容，以便在页面自行准备时显示，然后在一切准备就绪时消失？
【问题讨论】：
【参考方案1】：原答案
我需要这个，经过一些研究后我想出了这个（需要jQuery）：
首先，在<body> 标签之后添加：
<div id="loading">
<img id="loading-image" src="path/to/ajax-loader.gif" />
</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作为图像的src值。免费赠品here。 （右键单击 > 将图像另存为...）
更新
对于 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;
【讨论】：
当重定向到另一个页面时，它保持在同一页面并突然显示所需的页面，然后：在prev page beforeunload以及目标页面中显示加载窗格。 window.onbeforeunload = function () $('#loading').show(); +1 简短、甜美、清晰，我喜欢。但是我会删除那个 div 并只留下$('#loading').hide();。
jquery 3.0 及以上使用：$(window).on('load', function () $('#loading').hide(); )【参考方案2】：
此脚本将在页面加载时添加一个覆盖整个窗口的 div。它将自动显示一个仅 CSS 的加载微调器。它会等到窗口（不是文档）完成加载，然后再等待几秒钟（可选）。
适用于 jQuery 3（它有一个新的窗口加载事件） 不需要图片，但很容易添加一张 更改更多品牌或说明的延迟 唯一的依赖是 jQuery。来自https://projects.lukehaas.me/css-loaders的CSS加载器代码
$('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>【讨论】：
如何为 imag 标签添加这个？ @ManoM$(window).on("load", handler) 在所有 DOM 对象完成加载时触发，包括图像、脚本甚至 iframe。如果您想等待特定图像加载，请使用$('#imageId').on("load", handler)
这对我来说仅在页面首次加载时有效，即在打开或刷新浏览器/选项卡时。但是，当页面打开后加载时，它不会显示。我有一个带有切换显示不同内容的页面，并且在内容之间切换时需要一段时间才能加载。有没有一种方法可以调整相同的代码，不仅在第一次打开页面时加载，而且每次加载都需要一段时间？
@Joehat 将$( "#loadingDiv" ).remove(); 替换为$( "#loadingDiv" ).hide(); 并在setTimeout(removeLoader, 2000); 之前添加$( "#loadingDiv" ).show();。我删除了 div 以使页面更轻量级，但此修复使其可重用。
我试过你的代码..这很奇怪。当我调用我的页面时，它显示一个空白页面（它正在加载内容）。几秒钟后（我认为内容已加载），它显示加载程序 2 秒钟，而不是显示整个页面。你可以看看：criferrara.it/crigest/toshiba【参考方案3】：
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" />
</div> 在JS中创建最简单的fadeout效果的页面加载图像：
【讨论】：
【参考方案4】：我有另一个下面的简单解决方案，它非常适合我。
首先，创建一个名为 Lockon 的 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 的封面屏幕，它给出了 结果，并且一旦页面在加载窗口上方准备就绪，就会触发并在屏幕完全加载后隐藏封面屏幕。
【讨论】：
太棒了！只需要使用这些来使其全屏位置：固定；宽度：100vw；高度：100vh; 对不起，你在用 $("#ucNoteGrid_grdViewNotes_ctl01_btnPrint") 做什么【参考方案5】：默认内容为display:none，然后有一个事件处理程序在完全加载后将其设置为display:block 或类似的。然后将一个 div 设置为 display:block，其中包含“正在加载”，并在与之前相同的事件处理程序中将其设置为 display:none。
【讨论】：
你会使用什么事件来做到这一点？ Javascript页面加载？还是有更好的地方？ 取决于您是否有其他 JS 为页面进行设置 - 如果有，请在完成后调用它，如果没有，则文档加载工作正常。【参考方案6】：嗯，这在很大程度上取决于您如何加载“密集调用”中所需的元素，我最初的想法是您正在通过 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();
);
【讨论】：
不幸的是，它不是通过 ajax，它在等待 php 脚本从数据库中准备数据，因此加载了一些 html 元素，然后浏览器在加载其余部分之前等待数据表。这可能看起来好像页面已经停止，所以需要在那里显示一些东西来表明“正在发生一些事情”并且不会导致用户离开...... 仅供参考：Web 的原理（没有 ajax）是服务器呈现整个页面服务器端，并在完成后将此结果 (html) 发送到浏览器。如果页面的渲染在中间某处停止（而您可以看到页面出现在浏览器中），则它不能是 php 脚本，因为 php 只运行在服务器端。 查看我的答案以避免在每个 ajax 调用中添加beforeSend 和 success。【参考方案7】：
这是我最终使用的 jQuery，它监控所有 ajax 启动/停止，因此您无需将其添加到每个 ajax 调用中：
$(document).ajaxStart(function()
$("#loading").removeClass('hide');
).ajaxStop(function()
$("#loading").addClass('hide');
);
加载容器和内容的 CSS（主要来自 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>
【讨论】：
问题是，如果我在输入中有一个 ajax 加载的自动完成，加载器就会出现。【参考方案8】：我的博客将 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>标签没有关闭【参考方案9】：
创建一个包含您的加载消息的<div> 元素，为<div> 提供一个ID，然后在您的内容加载完成后，隐藏<div>：
$("#myElement").css("display", "none");
...或纯 JavaScript：
document.getElementById("myElement").style.display = "none";
【讨论】：
简单并完成工作。从可读性的角度来看，$("#myElement").hide() 不是更容易看吗？【参考方案10】：
这将与 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);
【讨论】：
【参考方案11】：在您的主题中使用 drupal custom_theme.theme 文件
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;
【讨论】：
【参考方案12】：基于@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();
);
【讨论】：
最好hide()这个元素而不是remove()它，这样你可以重复使用它。【参考方案13】：
我需要一个启动画面，我通过重用此处列出的部分解决方案来实现它。它使用 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 标记之后添加一个小脚本以开始显示加载/启动屏幕。
<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>
【讨论】：
以上是关于如何在页面加载完成之前显示页面加载 div？的主要内容，如果未能解决你的问题，请参考以下文章
使用JavaScript实现在页面上所有内容加载完之前一直显示loading...页面