javascript - 在查看页面之前预加载并运行 jQuery/javascript

Question

我正在从事一个项目，其中有很多 jQuery 正在进行中。因此，当我转到该页面时，我可以看到 jQuery 正在运行(例如，在加载 jQueryUI 之前，页面上的 $.button() 元素仍然显示为普通 html 元素: S) 所以最初它看起来很丑然后，一旦所有的 JS 被加载和执行，它看起来“不错”。

这不只是预加载图像或其他任何东西的情况，我想运行 jQuery 代码，但对访问者“隐藏”它，这样一旦页面打开，它立即看起来“不错”或显示黑屏说“正在加载...”，直到 jQuery 完成运行。

看看这里:http://www.filamentgroup.com/，虽然我不确定在显示它之前是否真的运行了该网站的 javascript，但它显示了黑屏显示“正在加载...”的基本概念。我怀疑这就是原因发生在大型网络应用程序中，例如 SlideRocket，尽管它确实使用了 flash...:S

Answer 1

您自己回答了这个问题。有某种加载屏幕可以隐藏页面，直到运行所有 jQuery。

尝试如下操作。

这位于您页面的顶部:

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>

这是你的 jQuery:

$(document).ready( function() {

    /*
     * ... all of your jQuery ...
     */

    // At the bottom of your jQuery code, put this:
    $('#loadingMask').fadeOut();
});