Fancybox 导致 IE 加载速度缓慢？

发布于 2024-11-08 07:31:19 字数 1600 浏览 5 评论 0原文

我正在使用 Fancybox v.1.3.4 在此页面上的 iframe 中显示视频。 Fancybox 和视频显示正常，但问题是，自从添加代码后，我在 IE7/8 中加载网站时遇到了巨大的停顿，类似于此问题 — 页面加载，然后 UI 冻结了 4-5 秒，阻止我点击链接、滚动或其他任何内容。这是我在页面顶部中链接的内容。包含 jQuery UI 包（包括 UI 1.8.11、UI Widget、UI Mouse、UI Position 和 UI Effects 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）之间可能存在冲突，但我不确定如何判断是否是这种情况，或者如果出现这种情况该怎么办最终就是这样。了解这些脚本的人有什么想法吗？提前致谢。

原文

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

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>

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烛影斜 2024-11-15 07:31:19

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

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

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.

回复收藏 0 原文