Question

我正在使用Fancybox v.1.3.4在this page上的iframe中显示视频。 Fancybox和视频显示正常，但问题是，自从添加代码后，我在IE7 / 8中加载网站时遇到了很大的停顿，类似于this issue - 页面加载，然后用户界面冻结4-5秒，阻止我点击链接，滚动或其他任何内容。这是我在<head>页面顶部链接的内容。包含jQuery UI包（包括UI 1.8.11，UI小部件，UI鼠标，UI位置和带有缩放的UI效果）主要用于启用尚未加载到网站上的其他效果，但将会是。< / p>

<script type="text/javascript" src="/lib/jquery/jquery-latest.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="/lib/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/lib/fancybox/jquery.fancybox-1.3.4.css" />

我在页面上使用了YSlow，建议将脚本调用移到底部，但这并没有解决IE中的暂停问题。然后我在使用IE8的开发人员工具加载期间查看了HTML DOM，并且当加载Fancybox的代码时，似乎发生了暂停;在暂停后立即，以下div显示在树的底部：

<div id="fancybox-tmp"/>
<div id="fancybox-loading" (jQuery attribute here)>
...
</div>
<div id="fancybox-overlay"/>
<div class="fancybox-ie" id="fancybox-wrap">
...
</div>

这一点，以及在我将fancybox添加到页面后出现问题的事实，这就是为什么我认为这是Fancybox的性能问题，但到目前为止我没有尝试过（没有关闭fancybox代码）似乎产生了影响。我尝试过的最新事情是删除对jQuery.ready（）的引用，以防它可能帮助它更早地加载fancybox代码并因此改变暂停的时间，但它没有做太多好处。不是我真的期望它，但我对jQuery和Fancybox有点新意，此时我正在抓住稻草。

我现在想的是，它可能是Fancybox与页面上其他脚本之间的冲突，例如Google Analytics，但我不确定如何判断是否是这种情况，或者是什么如果最终成为它的话。那些了解这些脚本的人的想法是什么？提前谢谢。

Answer 1

之前我遇到过类似fancybox和IE的问题。如果你查看CSS文件，有一大堆IE特定的过滤器：

/* IE6 */

.fancybox-ie6 #fancybox-close { background: transparent; filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='fancybox/fancy_close.png', sizingMethod='scale'); }

/* and so on */

在我的项目中，我删除了所有这些IE特定规则，冻结问题消失了。看看是否能解决它;否则问题可能出在其他地方。

Answer 2

您可以使用firebug来分析您的代码

Answer 3

我在IE中也遇到了Fancybox这个问题。对我来说，这是v1.6.0中引入的jQuery中的一个错误。升级到最新的jQuery版本（1.6.4）解决了这个问题。

More details at the Fancybox google group

Fancybox导致IE加载速度慢？

3 个答案: