花式框导致IE加载时间变慢



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

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

这一点,再加上在我将花哨框添加到页面后出现问题的事实,这就是为什么我认为这是花式框的性能问题,但到目前为止我尝试过的任何方法(除了删除花哨框代码)似乎都没有产生影响。我尝试的最新方法是删除对jQuery.ready()的引用,以防这可能有助于它更早地加载花哨的盒子代码,从而更改暂停的时间,但它并没有多大用处。并不是我真的期望它,但我对jQuery和Fancybox有点陌生,在这一点上,我抓住了稻草。

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

我以前在 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特定的规则,冻结问题消失了。看看这是否能解决它;否则问题可能出在其他地方。

你可以

使用Firebug来分析你的代码

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

更多细节在Fancybox谷歌组

最新更新