如何显示页面加载div，直到页面加载完成? [英] How to show Page Loading div until the page has finished loading?
问题描述
我的网站上有一个版块，在进行一些密集的通话时，加载速度很慢.
I have a section on our website that loads quite slowly as it's doing some intensive calls.
任何想法，我如何获得div来表达类似于加载"的内容，在页面准备时显示，然后在一切准备就绪时消失?
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?
推荐答案
我需要这个，经过一番研究，我想到了这个( jQuery 所需):
I've needed this and after some research I came up with this (jQuery needed):
首先，在<body>标记之后，添加以下代码:
First, right after the <body> tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
然后将div和图像的样式类添加到CSS:
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;
}
然后，将此javascript添加到您的页面中(当然，最好在页面结尾处，在结束</body>标记之前):
Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>
最后，使用样式类调整加载图像的位置和div的background-colour.
Finally, adjust the position of the loading image and the background-colour of the loading div with the style class.
就是这样，应该可以正常工作.但是，当然，您必须在某处放置ajax-loader.gif.免费赠品此处. (右键单击>将图片另存为...)
This is it, should work just fine. But of course you have to have an ajax-loader.gif somewhere. Freebies here. (Right-click > Save Image As...)
这篇关于如何显示页面加载div，直到页面加载完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
