如何显示页面加载div，直到页面加载完毕 [英] How to show Page Loading div until the page has finished loading
问题描述
任何想法我如何获得一个
div 来表示类似于加载，当页面准备好时显示，然后当一切都准备就绪时消失我需要这个，在互联网上进行了一些研究后，我想出了这个（需要jQuery）：
首页右后身体标签添加：
< div id = 装载 >
< img id =loading-imagesrc =images / ajax-loader.gifalt =正在加载.../>
< / div>
然后将div和image的样式类添加到CSS中：
#loading {
width：100％;
height：100％;
顶部：0;
左：0;
位置：固定;
display：block;
opacity：0.7;
background-color：#fff;
z-index：99;
text-align：center;
}
＃loading-image {
position：absolute;
顶部：100px;
left：240px;
z-index：100;
}
最后将此JavaScript添加到您的页面（最好在页面末尾，在关闭< body> 标记之前）：
; script language =javascripttype =text / javascript>
$（window）.load（function（）{
$（'＃load'）。hide（）;
}）;
< / script>
然后使用帮助样式类调整加载图像的位置和加载div的背景颜色
这是它，工作正常。但当然，你必须在某个地方有一个 ajax-loader.gif 。
I have a section on our website that loads quite slowly as it's doing some intensive calls.
Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?
I've needed this and after some research on the internet I came up with this (jQuery needed):
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your 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;
}
And finally add this javascript to your page (preferably at the end of your page, before closing <body> tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
Then adjust the position of the loading image and the background colour of the loading div with the help style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
这篇关于如何显示页面加载div，直到页面加载完毕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
