Fancybox导致IE加载速度慢?

dra*_*yre 3 jquery internet-explorer fancybox load-time

我正在使用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" />
Run Code Online (Sandbox Code Playgroud)

我在页面上使用了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>
Run Code Online (Sandbox Code Playgroud)

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

我现在想的是,它可能是Fancybox与页面上其他一个脚本之间的冲突,例如谷歌分析,但我不确定如何判断是否是这种情况,或者如果该怎么做最终成为它.那些了解这些脚本的人的想法是什么?提前致谢.

Ros*_*oss 6

我之前遇到过类似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 */
Run Code Online (Sandbox Code Playgroud)

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

  • 好吧,你将失去IE6的透明度,IE7在显示透明png背景时出现问题.关于IE8不确定.可能不值得担心; 我相信你的用户宁愿没有延迟,也没有透明度. (2认同)