jquery - 使用 jquery 加载屏幕

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
How to show Page Loading image/div/text until the page has finished loading/rendering

我想使用 jquery 显示整页加载屏幕。我以前从未使用过加载，所以我很困惑。我想要做的就是隐藏其他元素，直到加载所有脚本、CSS 图像和内容。我该怎么做？

Answer 1

非常简单:

1. 创建一个div来填充屏幕，您可以将加载的图像或文本放在那里
2. 在 html 文件末尾，或使用 jquery $(document).ready(function(){ ... });删除 div。
3. 您提到了所有“图像”...可能需要一些额外的内容。

所以，在你的html中，制作一个宽度和高度为100%的固定或绝对div..(我建议将溢出设置为隐藏，这样你就没有滚动条(宽度+填充+边距=>100%)

<div id='loading_wrap' style='position:fixed; height:100%; width:100%; overflow:hidden; top:0; left:0;'>Loading, please wait.</div>

您可以将其放在头部，如下所示:

<script type='text'javascript'>
$(document).ready(function(){
    $('#loading_wrap').remove();
});
</script>

或者将其添加到 html 页面的末尾(就在结束 html 标记之前):

<script type="text/javascript">$('#loading_wrap').remove();</script>

这可能不会等待图片加载，为此您将成为一个循环，在触发 .remove() 之前检查图片是否已加载；