问题描述
我正在使用Fancybox v.1.3.4在上的iframe中显示视频。 Fancybox和视频显示正常，但问题是，自添加代码以来，我在IE7 / 8中加载网站时遇到了很大的停顿，类似于 - 页面加载，然后UI冻结4-5秒，阻止我点击链接，滚动或其他任何内容。以下是我在页面顶部链接的内容，在< head> 中。包含jQuery UI包（包括UI 1.8.11，UI Widget，UI鼠标，UI位置和UI效果，带有Scale）主要用于启用尚未加载到网站上的其他效果，但将会是。
I'm using Fancybox v.1.3.4 to display videos in an iframe on this page. The Fancybox and the videos display fine, but the problem is that, since adding the code, I'm getting a huge pause when loading up the site in IE7/8, similar to this issue—the page loads, and then the UI freezes for a good 4-5 seconds, preventing me from clicking on links, scrolling, or anything else. Here's what I have linked at the top of the page, in the <head>. The jQuery UI pack (incl. UI 1.8.11, UI Widget, UI Mouse, UI Position, and UI Effects w/ Scale) is included mainly to enable other effects that aren't yet loaded on the site, but will be.
<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显示在树的底部：
I used YSlow on the page, which suggested moving the script calls to the bottom, but that didn't fix the pause in IE. I then took a look at the HTML DOM during load using IE8's Developer Tools, and the pause seems to occur as the code for the Fancybox is loading; immediately after the pause, the following divs appear at the bottom of the tree:
<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有点新意，此时我正在抓住吸管。
That, along with the fact that the problem appeared after I added the fancybox to the page, is why I figured it's a performance problem with Fancybox, but nothing I've tried so far (short of taking the fancybox code off) seems to have had an impact. The latest thing I've tried is removing references to jQuery.ready(), in case that might have helped it to load the fancybox code earlier and thus change the timing of the pause, but it didn't do much good. Not that I really expected it to, but I'm a bit new to jQuery and Fancybox and at this point I'm grasping at straws.
我在想什么现在，它可能是Fancybox与页面上其他脚本之一的冲突，例如谷歌分析，但我不确定如何判断是否是这种情况，或者如果最终成为它该怎么办。那些了解这些脚本的人的想法是什么？在此先感谢。
What I'm thinking now is that it might be a conflict between Fancybox and one of the other scripts on the page, such as Google Analytics, but I'm not exactly sure how to tell if that's the case, or what to do if that ends up being it. Any ideas from people who know their way around these scripts? Thanks in advance.
推荐答案
我之前遇到过类似fancybox和IE的问题。如果您查看CSS文件，有一吨特定于IE的过滤器：
I've experienced a similiar problem with fancybox and IE before. If you look in the CSS file, there are a tonne of IE specific filters:
/* IE6 */
.fancybox-ie6 #fancybox-close { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='fancybox/fancy_close.png', sizingMethod='scale'); }
/* and so on */
在我的项目中，我删除了所有这些IE特定规则，冻结问题消失了。
看看是否能解决它;否则问题可能出在其他地方。
In my project, I removed all of these IE specific rules and the freezing problem goes away.See if that resolves it; else the problem may be somewhere else.
这篇关于Fancybox导致IE加载时间变慢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！