使用 jQuery 在页面 Load() 上隐藏元素答案

【问题标题】：Hiding an element on pageLoad() with jQuery使用 jQuery 在页面 Load() 上隐藏元素
【发布时间】：2011-05-12 22:25:49
【问题描述】：

如果我使用 jquery 隐藏 page_load 上的某些元素，当页面发布时元素会闪烁一瞬间然后消失：

  function pageLoad() {

        $('#panelOne').hide();
        $('#panelTwo').hide();

有没有办法防止闪烁？

我不想将元素 css 设置为可见性：隐藏，因为稍后调用 jquery .show() 方法似乎不会显示元素。

【问题讨论】：

【解决方案1】：

设置visibility: hidden 不起作用，但display: none 起作用。 See jsFiddle.

您可以在 DOMReady 事件上执行此操作，但在 CSS 中执行此操作会更简洁。

【讨论】：

hide()ing 确实将 display 设置为 none，所以这应该没有任何区别（除了 hide() 将通过存储 display 的原始值来避免一些边缘情况错误）
相信jQuery的hide方法其实是为你设置了display: none。
嗯，是的。但在 CSS 中执行此操作更简洁，几乎可以肯定更快。
CSS 方法的问题在于，您需要使用 javascript 来显示内容。据推测，它交付的全部原因是为了在某个时候展示它；那些没有 javascript 的人会错过内容。
@Bobby 不一定是真的。用于显示内容的链接可能会优雅地降级为默认显示内容的页面。或者内容可能是一个顺便说明，有用但不是必需的。正确的方法取决于具体情况。我很难看出这值得否决。

【解决方案2】：

$.show() 不适用于设置为 visibility: hidden 的元素。您需要使用display: none。这比使用 jQuery 隐藏在 DOM 上更适合您，并且绝对保证您不会看到闪烁。

【讨论】：

【解决方案3】：

绝对使用准备好的文档而不是页面加载：

$(function() {
    $('#panelOne, #panelTwo')
        .hide();
});

【讨论】：

【解决方案4】：

不是在页面加载时隐藏，而是像这样在 domready 上隐藏它：

$(function() { ........ });

用你的 2 行隐藏替换......。

Domready 在构建 dom-tree 时运行，并且比 pageLoad 早得多。页面加载等待图像和东西运行。（假设您的 pageLoad 如下：<html onload="pageLoad();">）。

【讨论】：

实际上我这样做时仍然看到闪烁。和 document.ready() 一样吗？
是的，$(function) 是 document.ready 的简写。如果仍然看到闪烁，则需要考虑将元素隐藏在代码中（html/css），然后在需要时在 js 中再次显示。
@Sean：你有示例 URL 吗？我很难理解闪烁的原因。