Web 应用程序加载屏幕答案

【问题标题】：Web Application Loading ScreenWeb 应用程序加载屏幕
【发布时间】：2012-11-12 07:49:51
【问题描述】：

我有一个有多个树视图的网络应用程序。当页面加载时，我会看到无序列表，并且经过一小段延迟后，树的样式会呈现到 DOM 中。

有没有办法屏蔽 webapp，并在屏幕中间有一个微调器，当页面上的所有内容完全呈现时，微调器消失并且掩码淡出？有点像您会在灯箱弹出对话框中看到的半透明蒙版。

【问题讨论】：

【解决方案1】：

如果它是半透明的，您仍然会看到问题。添加

<div id="loadingmask"></div>

在</body> 之前。如果您设置了其他 z-index，则可能需要调整其 z-index。

CSS：

#loadingmask
{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    background:#000 url(yourspinner.gif) center no-repeat;

}

jQ // 当一切都完成时

$('#loadingmask').fadeOut(500, function(){ $(this).remove(); });

【讨论】：

它是否等待来自 css 的背景图像？还是只是简单地加载 html、css、js 内容？。
不，它不会等待。如果页面在微调器加载之前就准备好了，为什么要让用户等待微调器加载？
我的意思不是#loadingmask 元素的背景。我的意思是 css 文件中的所有背景图像，必须为全页视图加载。就我而言，我的应用程序在 CSS 中使用大量图形元素作为背景。因此，如果我创建加载屏幕，它必须加载 css 文件中使用的所有图像。