jQuery文檔準備與window onload衝突嗎？

我試圖在一起錄製視頻庫。我正在使用jQuery製作一個簡單的滑出面板。我也使用jQuery滾動縮略圖。他們都工作得很漂亮。問題是我需要滾動thubmils在滑出面板內工作，但它不會。我認爲這與兩個函數在文檔準備就緒以及另一個是窗口加載方面有關。我不確定是因爲我是jQuery的新手。有人能幫忙嗎。jQuery文檔準備與window onload衝突嗎？

這是滑出式面板功能。

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

而且她是滾動功能。

<script> 
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); 
</script>

任何人都可以在這裏看到什麼會互相沖突嗎？

這裏是整個html。

<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Vertical Sliding Info Panel With jQuery</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
<link href="jquery.thumbnailScroller.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="jquery-ui-1.8.13.custom.min.js"></script> 

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

<body> 

<div class="panel"> 
<div> 
<div id="tS2" class="jThumbnailScroller"> 
<div class="jTscrollerContainer"> 
    <div class="jTscroller"> 
     <a href="#"><img src="thumbs/img1.jpg" /></a> 
     <a href="#"><img src="thumbs/img2.jpg" /></a> 
     <a href="#"><img src="thumbs/img3.jpg" /></a> 
     <a href="#"><img src="thumbs/img4.jpg" /></a> 
     <a href="#"><img src="thumbs/img5.jpg" /></a> 
     <a href="#"><img src="thumbs/img6.jpg" /></a> 
     <a href="#"><img src="thumbs/img7.jpg" /></a> 
     <a href="#"><img src="thumbs/img8.jpg" /></a> 
     <a href="#"><img src="thumbs/img9.jpg" /></a> 
     <a href="#"><img src="thumbs/img10.jpg" /></a> 
     <a href="#"><img src="thumbs/img11.jpg" /></a> 
     <a href="#"><img src="thumbs/img12.jpg" /></a> 
     <a href="#"><img src="thumbs/img13.jpg" /></a> 
     <a href="#"><img src="thumbs/img14.jpg" /></a> 
     <a href="#"><img src="thumbs/img15.jpg" /></a> 
     <a href="#"><img src="thumbs/img16.jpg" /></a> 
     <a href="#"><img src="thumbs/img17.jpg" /></a> 
     <a href="#"><img src="thumbs/img18.jpg" /></a> 
     <a href="#"><img src="thumbs/img19.jpg" /></a> 
     <a href="#"><img src="thumbs/img20.jpg" /></a> 
    </div> 
</div> 
<a href="#" class="jTscrollerPrevButton"></a> 
<a href="#" class="jTscrollerNextButton"></a> 
</div> 
<!-- thumbnail scroller markup end --> 

<script> 
/* jQuery.noConflict() for using the plugin along with other libraries. 
You can remove it if you won't use other libraries (e.g. 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); 
</script> 
<!-- thumbnailScroller script --> 
<script src="jquery.thumbnailScroller.js"></script> 
</div> 
</div> 
<a class="trigger" href="#">infos</a> 

</body> 
</html>

來源

2011-12-30 Jakeray

這是怎麼回事你的jQuery包含？ – 2011-12-30 07:00:19

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最初顯示）

來源

2011-12-30 07:28:14

完美謝謝。它在頁面加載時瞬間閃爍一些小點，但我可以忍受。只要我有足夠的代表，我會一個這個。 – Jakeray 2011-12-30 07:44:03

爲了避免閃爍，你可以初始化.panel能見度：隱藏起來，它的尺寸都OK。而不是使用'隱藏（）'然後，你可以使用'CSS（{能見度： '可見的'，顯示： '無'}）'？ – 2011-12-30 07:52:59

再次感謝你。這個技巧不再閃爍。 – Jakeray 2011-12-30 08:01:35

的的document.ready將得到儘快執行爲您的DOM /文件已準備就緒，但所有對象（圖片/文字）在momery被加載後，才window.load將被執行。

我遇到了similer類問題，其中我使用document.ready來製作多個圖像列表的滾動條，但是由於某些圖像的大小很大，因此在加載這些圖像之前，document.ready會被解僱並遭遇這個問題..

所以後來我window.load與window.load我的滾輪創建過程改變了它所以現在只會之後被解僱時，所有的圖像加載到內存正確..

希望這將有助於你得到解決方案..

來源

2011-12-30 06:54:34

我的圖片滾動條在滑出面板外很棒。但是，如果我將它放在滑出面板調用的div中，它只顯示一個圖像並且不滾動。 – Jakeray 2011-12-30 07:00:50

爲什麼你在同一頁面使用2 document.ready函數。肯定會發生衝突。在開始時避免腳本聲明並嘗試。

您只需要腳本標記內的這麼多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);

來源

2011-12-30 06:58:43

這會阻止我的面板滑出。 – Jakeray 2011-12-30 07:13:28

使用2個document.ready函數絕對不會產生衝突。這些函數是爲了事件監聽器而註冊的，並且在文檔準備就緒時將按照該順序執行。 – 2011-12-30 07:16:36

首先刪除雙擊事件綁定$(".trigger").click(...)，只有第二個是必要的。然後嘗試在window.onload內初始化thumbnailScroller後移動此綁定，因爲在DOM準備好事件後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; 
    }); 
});

來源

2011-12-30 07:02:25 dfsq

這絕對是更乾淨的代碼，但它有相同的結果。 – Jakeray 2011-12-30 07:13:21

我的面板彈出像它應該，但它裏面的卷軸不會滾動，只顯示一個圖像。 – Jakeray 2011-12-30 07:15:27

也許這是因爲你的滾輪被初始化和jQuery寬度（）函數返回0寬度隱藏圖像的時刻隱藏。 '.css（'width'）'應該可以工作，但在這種情況下，你必須調整插件代碼 - 不好。不知道，但也許設置圖像的'width'和'height'屬性可以完成這項工作。 – dfsq 2011-12-30 07:21:46

jQuery文檔準備與window onload衝突嗎？

回答

相關問題