Fancybox 会导致 IE 中的加载时间变慢？答案

【问题标题】：Fancybox causing slow load times in IE?Fancybox 会导致 IE 中的加载时间变慢？
【发布时间】：2011-08-28 08:39:40
【问题描述】：

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

<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）之间的冲突，但我不确定如何判断是否是这种情况，或者是什么如果最终是这样的话。了解这些脚本的人有什么想法吗？提前致谢。

【问题讨论】：

标签： jquery internet-explorer fancybox load-time

【解决方案1】：

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

More details at the Fancybox google group

【讨论】：

【解决方案2】：

我以前在使用 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 特定规则，并且冻结问题消失了。看看能不能解决；否则问题可能出在其他地方。

【讨论】：

hmmm——听起来很有趣，也很合理。我们以前遇到过 IE 和过滤器的问题，所以很可能就是这样。我会检查并报告回来。不过，这会影响花式盒子的外观吗？
嗯，你会在 IE6 中失去透明度，而 IE7 在显示透明 png 背景时会出现问题。不确定IE8。可能不值得担心；我敢肯定，您的用户宁愿没有延迟也没有透明度，而不是相反。
成功了！注释掉 IE 过滤器规则摆脱了暂停。你让我省了很多麻烦，我的朋友。阴影暂时消失了，但要让我们的旧加载时间再次回来，这是一个很小的代价。非常感谢。
值得一读的雅虎开发者关于这个主题的最佳实践：developer.yahoo.com/performance/rules.html#no_filters

【解决方案3】：

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

【讨论】：

嘿，是的，做了很多。如前所述，我在 Firefox 中使用 YSlow 来评估可能的症结所在。我一直在使用 IE 开发工具，以便我可以看到 IE 中的 DOM 中发生了什么，因为它在 IE/FF 中完全不同。我也在 IE 中添加了 Firebug lite，但我认为最有用的 Net 组件并未包含在其中。