jQuery文档准备与window onload冲突？

我试图破解video库。 我正在使用jQuery制作一个简单的滑出面板。 我也使用jQuery滚动缩略图。 它们都很漂亮。 问题是我需要滚动的thubmnails在滑出面板内工作，但它不会。 我认为这与文档就绪的两个函数有关，另一个是窗口onload。 我不确定因为我是jQuery的新手。 有人能帮忙吗。

这是滑出面板function。

$(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); 

而她就是滚动function。

   jQuery.noConflict() (function($){ window.onload=function(){ $("#tS2").thumbnailScroller({ scrollerType:"clickButtons", scrollerOrientation:"horizontal", scrollSpeed:2, scrollEasing:"easeOutCirc", scrollEasingAmount:600, acceleration:4, scrollSpeed:800, noScrollCenterSpace:10, autoScrolling:0, autoScrollingSpeed:2000, autoScrollingEasing:"easeInOutQuad", autoScrollingDelay:500 }); } })(jQuery);  

任何人都可以在这看到任何相互冲突的东西吗？

这是整个HTML。

            $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); });    
 
 
 
 
                     
 
   
   /* jQuery.noConflict() for using the plugin along with other libraries. You can remove it if you won't use other libraries (eg prototype, scriptaculous etc.) or if you include jQuery before other libraries in yourdocument's head tag. [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */ jQuery.noConflict(); /* calling thumbnailScroller function with options as parameters */ (function($){ window.onload=function(){ $("#tS2").thumbnailScroller({ scrollerType:"clickButtons", scrollerOrientation:"horizontal", scrollSpeed:2, scrollEasing:"easeOutCirc", scrollEasingAmount:600, acceleration:4, scrollSpeed:800, noScrollCenterSpace:10, autoScrolling:0, autoScrollingSpeed:2000, autoScrollingEasing:"easeInOutQuad", autoScrollingDelay:500 }); } })(jQuery);    
 
 infos   

Answer 1

thumbnailScroller插件似乎需要计算拇指包装的尺寸。 在您的情况下，最初不会显示包装器，它可能会使插件混淆。

您可以尝试在执行插件后隐藏.panel元素。

 jQuery.noConflict(); /* calling thumbnailScroller function with options as parameters */ (function($){ $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); window.onload=function(){ $("#tS2").thumbnailScroller({ scrollerType:"clickButtons", scrollerOrientation:"horizontal", scrollSpeed:2, scrollEasing:"easeOutCirc", scrollEasingAmount:600, acceleration:4, scrollSpeed:800, noScrollCenterSpace:10, autoScrolling:0, autoScrollingSpeed:2000, autoScrollingEasing:"easeInOutQuad", autoScrollingDelay:500 }); // Hide the .panel only now : $(".panel").hide(); }; })(jQuery); 

（您需要修改CSS以便最初显示.panel）

Answer 2

一旦你的dom /文件准备好就会执行document.ready，但只有在momery中加载了所有对象（图像/文本）之后才会执行window.load。

我面临着similer的问题，我使用document.ready为我的多个图像列表制作滚动条，但由于一些图像的大小很大，因此在加载这些图像之前，文档已经被解雇并面临问题。

所以后来我用window.load更改了所以现在使用window.load我的滚动条创建过程只有在所有图像正确加载到内存后才会被触发。

希望这能帮助您获得解决方案..

Answer 3

为什么在同一页面中使用2 document.readyfunction。 它肯定会发生冲突。 只是在开始时避免脚本声明并尝试。

在script标签中只需要这么多js代码。 这对你有用。

 jQuery.noConflict(); /* calling thumbnailScroller function with options as parameters*/ (function($){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); window.onload=function(){ $("#tS2").thumbnailScroller({ scrollerType:"clickButtons", scrollerOrientation:"horizontal", scrollSpeed:2, scrollEasing:"easeOutCirc", scrollEasingAmount:600, acceleration:4, scrollSpeed:800, noScrollCenterSpace:10, autoScrolling:0, autoScrollingSpeed:2000, autoScrollingEasing:"easeInOutQuad", autoScrollingDelay:500 }); } })(jQuery); 

Answer 4

首先删除$(".trigger").click(...)双击事件绑定$(".trigger").click(...) ，只需要第二个。 然后尝试在window.onload中的thumbnailScroller初始化之后移动此绑定，在DOM ready事件之后，window.onload会激活很多。 并删除(function($){包装window.onload作为不必要的。试试这个：

 $(window).load(function() { // Initialize scroller $("#tS2").thumbnailScroller({ ... }); // Initialize panel $(".trigger").click(function() { $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); });