2

可能重复：
如何在页面完成加载/渲染之前显示页面加载图像/div/文本

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

4

1 回答 1

8

很简单：

  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(); 之前检查图片是否已加载；

于 2012-10-21T03:23:33.040 回答