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

我使用标准的JQuery UI函数创建了一个具有基于JQuery的对话框的页面。我使用JQuery的开箱即用功能来做到这一点......没有什么特别的。这里是我的对话框HTML：页面加载时瞬间显示的JQuery对话框

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

然后JQuery的JavaScript中称那变换<DIV>一个对话框：

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

同样，纯香草JQuery的。因此，您通过单击父页面上的链接来启动该向导，然后生成一个JQuery对话框，其中包含大量HTML，包括图像等。

随着我继续开发此页，我开始注意到当我在浏览器中加载页面的时候，我非常简单地显示了JQuery转换为对话框的标签。然后页面按预期行事。换句话说，这个对话框不会被隐藏，它会在页面上简单显示。相当丑陋和不专业的期待！ 但一秒钟后，页面将正确呈现，并且看起来与我预期的/想要的一样。

随着时间的推移，随着页面尺寸的增加，页面保持不正确渲染的时间也随之增加。我的猜测是，浏览器的渲染引擎正在渲染正在加载的页面，然后最终它将启动JQuery，它会将<div>转换为对话框。然后，这个jQuery函数会将简单的<div>转换为JQuery对话框并隐藏它（因为我将autoOpen属性设置为false）。一些浏览器<咳嗽> IE < /咳嗽>显示它比其他人长。我的大对话框现在导致页面错误地呈现大约1秒... YUCK！

来源

2010-04-09 Kevin Won

这是jQuery中常见的，首先你的网站元素（div的）将是丑陋的，约一秒钟，然后BAM！你会得到所有的风格，标签，手风琴等。我一直试图摆脱很长一段时间，现在没有运气。 – Ben 2010-04-09 00:23:14

{display：none; }对我来说效果很好。虽然这是有效的，但这只是另一个一般的黑客网站开发的例子。 – 2010-04-09 18:44:04

哦，我发现有这样一个术语：FOUC（Unstyled Content的Flash）。 – 2010-04-29 00:51:17

您可以添加一些CSS所以它默认是隐藏的，不需要的onload代码：

#myDialog { display: none; }

有了这个，没有其他的代码是必要的，当你打开对话框，它会扭转这种风格。所以没有额外的运行在document.ready。另外，如果你有很多的对话中，给它一个类，像这样：

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

有了这个CSS：

.dialog { display: none; }

在几乎所有情况下，jQuery的使用display风格属性，隐藏的东西，因此采用这种最初隐藏着什么将与任何你想使用的元素以后的工作，无论它是一个对话框，一个简单的.fadeIn()等

来源

2010-04-09 00:20:34

的作品就像一个魅力。谢谢。 – 2010-04-09 00:25:31

我想出了一个解决这个问题的工作正常，但我想知道如果有人知道更好的方法。

问题是浏览器在加载DOM时会呈现DOM，然后在隐藏它的末尾触发JQuery .js。所以我正在做的就是将父母的知名度转化为<div>标签，这样默认情况下所有的对话内容都是隐藏的，然后将这个父母<div>标记放入.js中。

<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>

，你可以看到，我只是在默认情况下关闭所有设备的可视性使页面呈现W/O显示该对话框的内容，然后我打开再次看到。这不是一个完美的解决方案，因为它仍然可以让页面有趣的一秒钟，但至少对话框的HTML不显示在线。使用此修补程序的UX是可以接受的，但并不理想。

来源

2010-04-09 00:17:09

我做了相当多的寻找一个解决这个，但没有找到，所以我问/回答这个问题自己，所以其他人没有感觉到疼痛。 – 2010-04-09 00:18:42

这里有一个更清洁的方式：用一个div包装你的对话框的div“显示：无”，所以你不必叫“可见性：可见”不要在$（文件）。就绪：

– 2011-09-29 15:30:54

你应该使用'的.css（ “知名度”， “可见”）'instaed .attr的'（）' – Blowsie 2013-03-25 10:26:34

我使用CSS3选择带着几分命名&标签公约。我所有的对话都<div>元素，而id始终以“对话”结束。然后我用这个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设置为类似“我的样本对话框”

来源

2014-07-29 11:37:47 Amit

如果您使用的是 “弹出”，而不是 “对话” 我必须做到以下几点：

HTML

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

CSS

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

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

来源

2017-06-26 09:57:13

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

回答

相关问题