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

Question

我正在开发一个项目,其中有很多jQuery正在进行中.所以当我进入页面时,我可以看到 jQuery正在运行(例如$.button(),在加载jQueryUI之前,页面上的元素仍然显示为普通的html元素:S)所以最初它看起来都很难看,一旦加载并执行了所有JS,看起来很好".

这不只是一个预加载图像或其他什么的情况,我想运行jQuery代码,但"隐藏"它来自访问者,以便一旦页面打开,它看起来"很好"直接或显示黑屏"加载. .."直到jQuery运行完毕.

看看这里:http://www.filamentgroup.com/,虽然我不确定在显示之前是否实际运行了网站的javascript,但是它显示了一个黑屏说"正在加载..."的基本想法. ..我怀疑这是大型网络应用程序中发生的事情,例如SlideRocket虽然它确实使用了闪存......: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();
});