如何在页面加载完成之前显示页面加载div
Sha*_*sri 129 html javascript jquery dom
我在我们的网站上有一个部分加载非常慢,因为它正在进行一些密集的调用.
任何想法我怎么能得到一个div类似于"加载"的东西,当页面准备自己然后在一切准备就绪时消失？
小智 195
我需要这个,经过互联网上的一些研究后我想出了这个(需要jQuery):
首先在body标签后添加:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
然后将div和image的样式类添加到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添加到您的页面(最好在页面末尾,然后在关闭<body>标记之前):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
然后使用帮助样式类调整加载图像的位置和加载div的背景颜色.
这就是它,工作得很好.但当然你必须有一个ajax-loader.gif地方.
- 当重定向到另一个页面时,它会保持在同一页面中并突然显示所需的页面,然后:显示前载页面中的加载窗格以及目标页面.window.onbeforeunload = function(){$('#loading').show(); } (4认同)
- +1 这很短，甜美而清晰，我喜欢它。但是我会删除那个 div 并只留下 <img> (; (2认同)
- 加载图像需要一段时间,直到页面加载为止 (2认同)
Dar*_*z J 28
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中创建最简单的淡出效果的页面加载图像:
Vic*_*ard 28
此脚本将添加一个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>我有另一个下面简单的解决方案,这对我来说非常有用.
首先,创建一个名为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； (2认同)
默认内容为display:none,然后有一个事件处理程序,display:block在完全加载后将其设置为或类似.然后将一个div设置为display:block"Loading",并将其设置display:none为与之前相同的事件处理程序.
- 你会用什么事件来做到这一点？Javascript 页面加载？或者有更好的地方吗？ (2认同)