如何在页面加载完成之前显示页面加载 div? [英] How to show Page Loading div until the page has finished loading?
问题描述
我们网站上有一个部分加载速度很慢，因为它正在执行一些密集调用.
知道如何让 div 说出类似于加载"的内容吗?在页面准备好时显示，然后在一切准备就绪时消失?
原答案
我需要这个，经过一些研究，我想出了这个(需要jQuery):
首先，在 标签之后添加:
<img id="加载图片";src="path/to/ajax-loader.gif";alt=正在加载..."/>然后将 div 和图像的样式类添加到您的 CSS 中:
#loading {位置:固定；显示:块；宽度:100%；高度:100%；顶部:0；左:0；文本对齐:居中；不透明度:0.7；背景色:#fff;z-索引:99；}#加载图像{位置:绝对；顶部:100px；左:240px；z-索引:100；}然后，将此 javascript 添加到您的页面(当然，最好在页面末尾，在关闭 </body> 标记之前):
最后用样式类调整加载图片的位置和加载div的background-color.
就是这样，应该可以正常工作.但是当然你应该在某处有一个 ajax-loader.gif 或者使用 base64 url 作为图像的 src 值.免费赠品这里.(右键单击 > 将图像另存为...)
更新
对于 jQuery 3.0 及更高版本，您可以使用:
更新
原始答案来自 jQuery，并且在 flexbox 时代之前.您现在可以使用许多视图管理库/框架，例如 Angular、React 和 Vue.js.对于 CSS，您有 flexbox 选项.以下是 CSS 替代方案:
#loading {位置:固定；显示:弹性；对齐内容:居中；对齐项目:居中；宽度:100%；高度:100%；顶部:0；左:0；不透明度:0.7；背景色:#fff;z-索引:99；}#加载图像{z-索引:100；}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?
Original Answer
I've needed this and after some research I came up with this (jQuery needed):
First, right after the <body> tag add this:
<div id="loading">
<img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your 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;
}
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>
Finally, adjust the position of the loading image and the background-color of the loading div with the style class.
This is it, should work just fine. But of course you should have an ajax-loader.gif somewhere or use base64 url for image's src value. Freebies here. (Right-click > Save Image As...)
Update
For jQuery 3.0 and above you can use:
<script>
$(window).on('load', function () {
$('#loading').hide();
})
</script>
Update
The original answer is from jQuery and before flexbox era. You can use many view management libraries / frameworks now like Angular, React and Vue.js. And for CSS you have flexbox option. Below is CSS alternative:
#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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
