2

Javascript Coin Slider の使用に問題があります (このワークショップからダウンロードできます)。スクリーンショットを2枚添付します。1 つはクロムで動作するファイルで、2 番目はサーバーで同時にホストされている同じファイルです。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>
4

1 に答える 1

3

エラー コンソールを確認すると、次のエラーが表示されます。Uncaught TypeError: Object [object Object] has no method 'coinslider'

これは、coinslider スクリプトがロードされていないことを示しています。ただし、ソースを確認すると、javascript ファイル (ファイル) が正しく読み込まれたことがわかります。

これにより、ファイルが適切なタイミングでロードされなかったと想定できます。

ソースをもう一度確認すると、コインスライダーの初期化が呼び出しにラップされていないdocument.readyため、呼び出しが順不同であることがわかります。

解決策: coinslider の初期化をdocument.ready関数にまとめて、jQuery と他のすべてが使用可能になり、すべてが機能し始めることがわかります。

おまけ:ローカルでは動作しているがサーバーでは動作していない理由は、ローカルではファイルの読み込みにほとんど遅延がないためです。インターネット経由でダウンロードされるのを待つ必要がないため、基本的にソースで指定した順序で実行されます。例（説明を簡単にするために少し簡略化しています）：

含めるファイルは 2 つあります: jQuery.js と coinslider.js で、この順序で (jQuery が最初に) 含めます。

私たちの coinslider.js ファイルは jQuery を参照しており、実行する前に jQuery をロードする必要があります。

この例のために、両方の js ファイルが同じサーバー上にあると仮定しましょう。ただし、jQuery.js ファイルは coinslider.js ファイルよりもはるかに大きいとします。ファイル サイズが大きいため、jQuery.js ファイルは coinslider.js ファイルよりもダウンロードに時間がかかります (実際には、ファイル サイズだけでなく、サーバーが世界のどこにあるか (レイテンシー) にも依存します)。あなたとサーバー間のインターネットの速度）。

2 つのダウンロード要求 (1 つは jQuery.js 用、もう 1 つは coinslider.js 用) が基本的に同時に送信されるとします (時間 0 秒)。jQuery.js のダウンロードには 5 秒、coinslider.js のダウンロードには 2 秒かかります。

時間 1 秒: 両方のファイルがまだダウンロード中です。

時間 2 秒: coinslider.js のダウンロードが完了し、実行されます。

時間 5 秒: jQuery.js のダウンロードが完了し、実行されます。

ブラウザに coinslider.js をすぐに実行するように指示するコードがないため、時間 2 秒で実行され、jQuery.js がまだ実行されていないために失敗します。

document.ready関数を coinslider.js の初期化にラップすることで、実行する前にすべての準備が整うまで待機するようにブラウザーに指示します。これにより、jQuery が使用可能になり、すべてが正常になる 5 秒マークまで待機します。

幸せな楽しいパーティータイムが発生します:)

コードへの編集 スクリプトを含める際に構文の問題があったようです (<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>

消して。

于 2012-04-27T01:51:22.287 に答える