页面加载时暂时显示的JQuery对话框

Question

我创建了一个页面，其中包含一个基于JQuery UI函数的对话框。我使用JQuery的开箱即用功能完成了这个操作......没有任何特殊之处。以下是对话框的HTML：

<div id = "myDialog">
    <!-- ... more html in here for the dialog -->
</div>

然后在JavaScript中调用jQuery将<div>转换为对话框：

    // pruned .js as an example of kicking up a JQuery dialog
    $('#myDialog').dialog({
        autoOpen: false,
        title: 'Title here',
        modal: true
        }
    });

这里使用了简单纯粹的 JQuery。你可以通过在父页面上点击链接来启动向导，然后它会生成一个包含大量 HTML（包括图像等）的 JQuery 对话框。

随着我不断开发这个页面，我开始注意到当我在浏览器中加载页面时，我放置在 JQuery 中会转换为对话框的 <div> 标签会非常短暂地显示出来。然后页面就会按预期运行。换句话说，对话框没有被隐藏，而是在页面内以行内元素的形式短暂地显示出来。相当丑陋和不专业！但在一瞬间之后，页面会正确地呈现出来，并且看起来正如我所期望/想要的那样。

随着页面大小的增长，页面保持不正确渲染的时间也越来越长。我猜测浏览器的呈现引擎正在加载页面时渲染页面，然后在最后启动将 <div> 转换为对话框的 JQuery。由于我将 autoOpen 属性设置为 false，因此该 JQuery 函数会将简单的 <div> 转换为 JQuery 对话框并将其隐藏起来。某些浏览器<咳嗽>IE</咳嗽> 显示时间比其他浏览器更长。我的大型对话框现在导致页面不正确地呈现约 1 秒钟... 奇怪！

- Kevin Won

---

这在jquery中很常见，首先您的网站元素（div）将会很丑陋，大约一秒钟后，突然就有了所有的样式、选项卡、手风琴等。我一直试图消除这个问题，但一直没有成功。 - Ben

"display:none;" 对我来说很有效。虽然它能够起作用，但这只是网页开发中的另一个例子，说明它有多么的不专业。 - Kevin Won

哦，我发现这个有一个术语：FOUC（未经样式处理的内容闪烁）。 - Kevin Won

Answer 1

您可以添加一些CSS使其默认隐藏，无需使用onload代码：

#myDialog { display: none; }

有了这个代码，当你打开对话框时它会自动反转这个样式，所以不需要额外运行document.ready的代码。另外，如果你有很多对话框，请给它一个类，像这样：

<div id="myDialog" class="dialog"></div>

使用这个CSS：

.dialog { display: none; }

几乎所有情况下，jQuery使用display样式属性来隐藏元素，因此使用它来最初隐藏某些元素将能够与后面想要使用该元素的任何内容一起工作，无论是对话框、简单的 .fadeIn()等。

- Nick Craver

Answer 2

如果你使用的是“弹出窗口”而不是“对话框”，那么我必须执行以下操作：

HTML

<div data-role="popup" class="popup">
  <!-- CONTENT -->
</div>

CSS

.popup { display:none; }
.ui-popup-container .popup { display:block; }

我最初使用display:none隐藏弹出窗口，但在jQueryUI将弹出窗口包装在容器中后，其他样式优先。

- Lee Gunn

Answer 3

我已经想出了一个解决这个问题的方法，它可以正常工作，但是我想知道是否有更好的方法。

问题在于浏览器在加载DOM时呈现它，然后在最后触发JQuery .js。所以我所做的就是在父级<div>标签中关闭可见性，以便默认情况下隐藏所有对话框内容，然后在.js中打开该父级<div>标签。

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog">
        <!-- ... more html in here for the dialog -->
    </div>
</div>

然后是 JQuery .js：

<script type="text/javascript">

$(document).ready(function() {
    //turn the visibility on last thing
    $("#bodyDiv").attr("style", "visibility:visible");
});
</script>

正如您所看到的，我默认关闭所有内容的可见性，以便页面在不显示对话框内容的情况下呈现，然后再次打开可见性。这不是一个完美的解决方案，因为它仍然可能使页面在一秒钟内表现出奇怪的行为，但至少对话框HTML不会内联显示。这个修复的用户体验是可以接受的，虽然不理想。

- Kevin Won

---

我花了很多时间搜索解决方案，但没有找到，所以我自己提出/回答这个问题，让其他人不必感受到痛苦。 - Kevin Won

这里有一种更简洁的方法：用一个带有"display:none"属性的div包装你的对话框div，这样你就不必在$(document).ready()中调用"visibility:visible"了：

- Robert Corvus

你应该使用.css("visibility", "visible")而不是.attr()。 - Blowsie

Answer 4

我使用CSS3选择器和一些命名和标签约定。 我的所有对话框都是<div>元素，并且id始终以“dialog”结尾。 然后我使用这个CSS：

div[id$=dialog] { display: none; }

一个示例对话：

<div id="my-sample-dialog" title="Sample Dialog">
      <span>I'm invisible!</span>
</div>

如果CSS3不可用，您可以使用CSS2来实现相同的结果，但是您必须更加小心，不要在任何未打算隐藏的<div> id中使用对话框标识：

div[id~=dialog] { display: none; }

并将您的对话框 ID 设置为类似于“我的示例对话框”之类的内容

- Amit