如何显示页面加载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屋!