如何显示页面加载div，直到页面加载完成
我在网站上有一个部分，加载速度很慢，因为它正在进行一些密集的呼叫。
任何想法如何让一个div来说一些类似于“加载”显示，而页面准备自己，然后消失时，一切准备好了？
我需要这个，经过在互联网上的一些研究，我想出了这个（需要jQuery）：
在body标签后面加上这个：
<div id="loading"> <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> </div>
然后将div和图像的样式类添加到您的CSS：
#loading { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.7; background-color: #fff; z-index: 99; text-align: center; } #loading-image { position: absolute; top: 100px; left: 240px; z-index: 100; }
最后添加这个JavaScript到你的页面（最好是在你的页面的结尾，当然在closures<body>标签之前）：
<script language="javascript" type="text/javascript"> $(window).load(function() { $('#loading').hide(); }); </script>
然后用帮助样式类来调整加载图像的位置和加载div的背景颜色。
这是它，工作得很好。 但是，当然你必须有一个ajax-loader.gif地方。
JS：
window.onload = function(){ document.getElementById("loading").style.display = "none" }
CSS：
#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}
HTML：
<div id="loading"> <img id="loading-image" src="img/loading.gif" alt="Loading..." /> </div>
在JS中创build最简单的淡出效果的页面加载图像：
该脚本将添加一个覆盖整个屏幕的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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> This script will add a div that covers the entire screen 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 (it has a new window load event)</li> <li>No image needed but it's easy to add one</li> <li>Change the delay for more 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
默认的内容display:none ，然后有一个事件处理程序，它将其设置为display:block或完全加载后类似。 然后有一个设置为display:block的div display:block带有“加载”的display:block ，并将其设置为在与之前相同的事件处理程序中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(); });
我有另一个简单的解决scheme，这完全为我工作。
首先创build一个名为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; }
现在我们需要用这个类来创build我们的div，当页面被加载的时候，这个类覆盖了整个页面
<div id="coverScreen" class="LockOn"> </div>
现在我们需要在页面准备就绪的时候隐藏这个封面屏幕，这样我们可以限制用户点击/触发任何事件，直到页面准备就绪
$(window).on('load', function () { $("#coverScreen").hide(); });
上面的解决scheme将罚款无论何时加载页面。
现在问题出现在页面加载后，每当我们点击一个button或一个需要很长时间的事件时，我们需要在客户端点击事件中显示出来，如下所示
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () { $("#coverScreen").show(); });
这意味着，当我们点击这个打印button（这将需要很长时间来给报告），它会显示我们的封面屏幕与GIF哪给 
结果，一旦页面已经准备好，窗口上的加载function将触发，并且一旦屏幕完全加载就隐藏封面屏幕。
这里是我最终使用的jQuery，它监视所有的ajax start / stop，所以你不需要把它添加到每个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>
创build一个包含你的加载消息的<div>元素，给<div>一个ID，然后当你的内容加载完成后，隐藏<div> ：
$("#myElement").css("display", "none");
…或用普通的JavaScript：
document.getElementById("myElement").style.display = "none";
基于@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(); });
我的博客将工作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">
Window.unload运作良好。 只需将其放置在您的网页上。 （使用jQuery的例子）：
<script type="text/javascript"> $(window).unload(function() { var html = "<img src='html/loading.gif' />"; $('#loading').append(html); }); </script> <div id="loading" />
