Javascript Coin Slider - 在服務器上時不工作

Question

我在使用Javascript Coin Slider時遇到問題（很棒的下載地址：this workshop）。我附上2個屏幕截圖。其中一個是使用chrome工作的文件，另一個是同時託管在我的服務器上的同一個文件。這是我第一次真正玩JQuery，所以我不確定是否有什麼我只是俯視？我已經詳盡地看過我所有的相關鏈接，以確保它們都是語法和語義上的正確。

請幫忙！

下面是HTML/JS：

<div id="coin-slider"> 
<a href="team/index.html"><img src="img/jq/1.jpg" /></a> 
<a href="history/index.html"><img src="img/jq/2.jpg" /></a> 
<a href="planning/index.html"><img src="img/jq/3.jpg" /></a> 
<a href="fun/index.html"><img src="img/jq/4.jpg" /></a> 
<a href="girls/index.html"><img src="img/jq/5.jpg" /></a> 
<a href="tour/index.html"><img src="img/jq/6.jpg" /></a> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' }); 
     }); 
     </script> 
</div> 

...我的頭電話：

<!-- JQuery Coin Slider image display and transition inclusions --> 
    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/coin-slider.min.js"></script> 

Answer 1

如果你檢查你的錯誤控制檯你會看到以下錯誤：Uncaught TypeError: Object [object Object] has no method 'coinslider'

這表示coinlider腳本尚未加載。如果您檢查源代碼，您可以看到JavaScript文件正確加載（文件）。

這會讓您假設它沒有在正確的時間加載文件。

再次檢查您的源代碼顯示您沒有將coinlider初始化包裝到document.ready調用中，因此調用失靈。

解決方案：收官coinslider初始化成document.ready功能，使jQuery和其他一切可用，你會發現，一切都會開始工作。

紅利注意事項：它在本地工作但不在服務器上的原因是本地加載文件幾乎沒有延遲。您不必等待它通過互聯網下載，因此它基本上按照您在源代碼中提供的順序運行。例如（簡化了一下，以幫助解釋）：

我們有2個文件，我們包括：jQuery.js和coinslider.js，我們按順序包括它們（jQuery優先）。

我們的coinslider.js文件引用了jQuery，並且需要jQuery才能執行。

爲了說明這個例子，假設兩個js文件都位於同一個服務器上，但是jQuery.js文件比coinslider.js文件大很多。由於該文件的大小，jQuery.js文件比coinlider.js文件下載花費的時間要長得多（實際上，它不僅取決於文件大小，還取決於服務器在世界上的位置 - 延遲 - 還你和服務器之間的互聯網速度）。

假設2個下載請求（1代表jQuery.js，1代表coinslider.js）基本上在同一時間（時間0秒）發送。 jQuery.js需要5秒鐘下載，而coinlider.js則需要2秒鐘才能下載。

時間1秒：兩個文件仍在下載。

時間2秒：coinslider.js已完成下載並執行。

時間5秒：jQuery.js已經完成下載並執行。

因爲沒有任何代碼告訴瀏覽器立即執行coinslider.js，它會在2秒鐘運行並失敗，因爲jQuery.js尚未執行。

通過在coinlider.js初始化周圍包裝一個document.ready函數，我們告訴瀏覽器在執行前等待所有事情都準備好了，所以它會一直等到5秒鐘的時間，屆時jQuery將可用，好。然後

快樂有趣的聚會時間，可能會發生:)

編輯代碼 貌似有一個與包括腳本（你不能有其他<script>標籤內<script>標籤的一些語法問題。

我不記得是什麼原來的版本是一樣的，但與它目前正在改變......

<!-- JQuery Coin Slider image display and transition inclusions --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><script type="text/javascript"> 
    $(document).ready(function() { 
     $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' }); 
     }); 
     </script></script> 
    <script type="text/javascript" src="js/coin-slider.min.js"><script type="text/javascript"> 
    $(document).ready(function() { 
     $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' }); 
     }); 
     </script></script> 

爲：

<!-- JQuery Coin Slider image display and transition inclusions --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/coin-slider.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' }); 
}); 
</script> 

此外，在源的〜行93，你的內<div id="coin-slider">

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' }); 
     }); 
</script> 

下將其刪除。