我在我们的网站上有一个部分加载速度很慢，因为它正在执行一些密集调用。
知道如何div在页面准备自己时说出类似于“加载”的内容，然后在一切准备就绪后消失吗？
如何在页面加载完成之前显示页面加载 div？
IT技术
javascript
jquery
html
dom
loader
2021-01-17 13:27:31
6个回答
原答案
我需要这个，经过一些研究，我想出了这个（需要jQuery）：
首先，在<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>
最后，通过background-color样式类调整加载图片的位置和加载div的位置。
就是这样，应该可以正常工作。但是当然你应该有一个ajax-loader.gif地方或使用 base64 url 作为图像的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;
}
该脚本将在页面加载时添加一个覆盖整个窗口的 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>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创建的最简单淡出效果的页面加载图片：
我有另一个以下简单的解决方案，它对我来说非常有用。
首先，创建一个名为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 的封面屏幕，它会给出
结果，一旦页面准备就绪，加载功能将在窗口上方触发并隐藏封面屏幕一旦屏幕完全加载。
默认内容为display:none，然后有一个事件处理程序，display:block在它完全加载后将其设置为或类似的。然后将 div 设置为display:block“正在加载”，并将其设置display:none为与以前相同的事件处理程序。
其它你可能感兴趣的问题