Question

我正在开发一个项目，其中有很多jQuery正在进行中。所以当我进入页面时，我可以看到运行的jQuery（例如，在加载jQueryUI之前，页面上的$.button()元素仍然显示为普通的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();
});

Answer 2

将您想要“预加载”的所有jQuery包装到此：

$(window).load(function() {
    //Your jQuery here
});

或者，并非所有的jQuery代码都在该包装器中。相反，将您的jQuery DOM更改为

$(document).ready(function(){
    //jQuery
}))

然后为您的所有网站内容提供包装。

<div id="everything-wrapper">
    <!-- put your body here -->
</div>

并在CSS中将显示设置为none

#everything-wrapper {
    display : none;
}

然后像之前一样加载窗口

$(window).load(function() {
    $("#everything-wrapper").show();
    // or
    $("#everything-wrapper").fadeIn("fast");
    // to be fancy with it
});

Answer 3

我遇到了类似的问题，在IE8的页面加载过程中会短暂弹出一个工件。我使用的解决方案是将容器的可见性更改为隐藏在css的第1行。然后在jquery文件的末尾显示了该元素。如果css和jquery开始争论，则在解析参数之前不会显示该元素。

Answer 4

我会将覆盖作为静态CSS和HTML的一部分，然后当JQuery通过

加载时

$(document).ready()您可以隐藏叠加层

Answer 5

克里斯托弗的回答很可能是FilamentGroup的做法。您可以将javascript“预加载”，它与页面的其余部分一起加载，并且由于它通常比页面的其余部分大，下载时间更长。你不能先加载javascript，这不是它的工作方式。

然而，使其工作的原则是“隐藏”您的页面在CSS中的视图（或者内联样式，因为CSS仍然需要加载）然后一旦所有内容都准备好在javascript中再次显示它。如果您发现显示（无）的页面与FilamentGroup上显示的javascript加载之间存在差距。那是因为他们隐藏了页面，javascript加载器加载，然后一旦javascript的其余部分完成它隐藏加载器并显示页面。

Answer 6

伙计，我给你做了样品。我希望你喜欢。我在自己的网站上使用这样的东西。 http://jsfiddle.net/jMVVf/

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

6 个答案: