JQuery Document.ready 功能在页面启动时闪烁答案

【问题标题】：JQuery Document.ready functionality flashes at page start-upJQuery Document.ready 功能在页面启动时闪烁
【发布时间】：2012-06-14 06:39:06
【问题描述】：

我正在使用 JQuery 的 document.ready 从我的 MVC 母版页中隐藏一些内容。但是，当页面加载时，我可以看到我正在删除的元素闪烁一秒钟，然后消失。

这就是我的做法：

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#HideDiv").remove()
        });
    </script>

我怎样才能摆脱这种闪烁？我希望我要删除的元素在页面呈现之前消失。

更新：

我应该指出，我正在动态执行此操作，将某些内容隐藏在某些页面上。 HideDiv 只是我给出的一个示例名称，也许是一个糟糕的名称。

例如，我在顶部有一个菜单栏，其中包含指向各个页面的链接。当用户在该页面上时，我想删除指向该页面的链接。我不是在每个页面上手动添加所需的链接，而是将它们全部放在母版页中，我只是隐藏了我不想在页面上显示的链接。

显然 document.ready 还不是时候这样做？有什么更好的方法来实现这一点？

【问题讨论】：

标签： jquery asp.net-mvc document

【解决方案1】：

如果您最初使用 CSS 隐藏元素，它们将不会显示：

<style type="text/css">
#HideDiv { display: none; }
</style>

如果不能这样做，您可以在元素之后立即放置一个脚本标记：

<div id="HdeDiv">...</div>
<script type="text/javascript">
$('#HideDiv').remove();
</script>

【讨论】：

问题是我根据页面动态隐藏了这些东西。所以我希望 HideDiv 出现在 10 个页面中的 3 个页面上。
@Mike - 那么，也许你的解决方案不能像你想要的那样通用。

【解决方案2】：

使用 fadeOut() 或 hide() 代替删除；

$("#HideDiv").remove(); // remove completly removes from dom

下面的效果平滑

$("#HideDiv").fadeOut();

$("#HideDiv").hide()

【讨论】：

【解决方案3】：

在页面加载之前，您的 JavaScript 不会运行 - 这就是 $(document).ready() 所做的。

但是为什么不使用 css 隐藏 div 呢？像这样：

<style type="text/css">
    #HideDiv
    {
        display: none;
    }
</style>

【讨论】：