jQuery 插件的测试页面在 Chrome 中查看时显示无样式代码的闪烁 - 为什么？

Question

我正在尝试使用 jQuery 实现一个基本的下滑面板，基于以下插件：

http://samuelgarneau.com /lab/slidebox/

我遇到的问题是，当我在 Chrome 中查看时，左上角似乎有一闪而过的无样式内容（来自面板）。这是链接：

http://www.asolidsite.com/clients/glennstar/ custom/index.html

这在插件演示中不会发生 - 所以我一定是搞砸了一些东西。但我尝试过玩各种各样的东西，但没有运气。想知道是否有人对 jQuery 有一定的了解。

我想知道 jQuery bg resizer 是否可能会干扰事物（并导致它在加载时滞后如此之多......）。

感谢您的帮助！

Answer 1

您是否尝试过更改源代码以将全屏背景 javascript 和滑块 javascript 放在一起？因为现在你有一个，然后是另一个，然后依次是每个的 jquery 操作。最好先有全屏后台脚本，然后是 jquery 操作，然后是滑块脚本，然后是 jquery 操作。我还会在底部添加 cufon 脚本，因为即使它没有立即加载，它对功能的影响也最小。

另外，如果这对您不起作用，请更改全屏背景和滑块脚本，以便滑块在全屏背景之前加载。由于它是一个相当大的文件，这可能会导致抖动。

示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    
<script type="text/javascript" src="js/jquery.fullscreenr.js"></script>
<script type="text/javascript">  
          <!--
          var FullscreenrOptions = {  width: 1400, height: 895, bgID: '#bgimg' };
          jQuery.fn.fullscreenr(FullscreenrOptions);
          //-->
</script> 
<script type="text/javascript" src="js/slidebox.js"></script>     
<script type="text/javascript">  
                $(document).ready(function(){
                    $("#slider").slideBox({width: "100%", height: "200px", position: "top"});
                });
</script>
<script type="text/javascript" src="js/cufon-yui.js"></script>

顺便说一下（也是题外话），我认为这个设计很漂亮。如果我没猜错的话，我以前住的地方离艾伯塔省梅迪辛哈特这个地区很近。