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

【问题标题】：Preload and run jQuery/javascript before viewing the page在查看页面之前预加载并运行 jQuery/javascript
【发布时间】：2011-09-14 14:58:00
【问题描述】：

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

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

看看这里：http://www.filamentgroup.com/，虽然我不确定在显示它之前是否实际运行该网站的 javascript，但它显示了一个黑屏显示“正在加载...”的基本想法。我怀疑这就是在诸如SlideRocket 等大型网络应用程序中发生的情况，尽管它确实使用了 Flash...：S

【问题讨论】：

我个人会离开该网站。除非我别无选择（请参阅 ExtJS/Dojo API 文档），否则我不是来这里查看 purty purty 加载图像。我宁愿你部分加载你的页面或者想出一个不同的解决方案来解决一个明显的性能问题，而不是来到你的加载图像。但这就是我。我相信很快就会有人使用现成的 jQuery。

标签： javascript jquery html jquery-ui

【解决方案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();
});

【讨论】：

天才。奇迹般有效。简短、准确、有效。谢谢。
@Matt Bradley 它对我也很有用，谢谢！但是您是否知道如何在第一次加载时不让页面关闭一秒钟？尝试进入我的网站：soulstudio.eu - 你可以在那里看到第一次进入整个页面闪烁一秒钟。如何避免？

【解决方案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 中将显示设置为无

#everything-wrapper {
    display : none;
}

然后像之前一样加载窗口

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

【讨论】：

你读过这个问题吗？大部分页面已加载，然后运行 jQuery 和 jQuery UI，将标准按钮更改为 jQuery UI 按钮和其他此类工件。
您阅读我的解决方案了吗？试试看它是否不起作用。我敢打赌它会。
您确实明白我在您的第一个解决方案时发表了评论，对吧？
你让我获得了王牌。你可以在不改变 DOM 的情况下做到这一点，对吧？我从来没有这样尝试过。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

$(document).ready()你可以隐藏覆盖

【讨论】：

【解决方案5】：

Christopher 的回答很可能就是 FilamentGroup 的做法。您可以“预加载”javascript，它与页面的其余部分一起加载，并且由于它通常比页面的其余部分大，因此下载需要更长的时间。你不能让javascript先加载，这不是它的工作方式。

但是，使其工作的原则是在 CSS 中“隐藏”您的页面（或使用内联样式，因为 CSS 仍需要加载），然后在 javascript 中准备好一切后再次显示。如果您注意到页面显示（无）与 FilamentGroup 上显示的 javascript 加载之间存在差距。那是因为他们隐藏了页面，加载了 javascript 加载器，然后一旦其余的 javascript 完成，它就会隐藏加载器并显示页面。

【讨论】：

【解决方案6】：

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

【讨论】：