Javascript Coin Slider - 在服务器上无法正常工作

Question

我在使用Javascript Coin Slider时遇到问题（很棒的下载fr /：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来电中，因此调用无序。

解决方案：将coinlider初始化整合到document.ready函数中，以便jQuery和其他所有内容都可用，您会发现它将全部开始工作。

奖励说明：它在本地工作但不在服务器上工作的原因是本地加载文件几乎没有延迟。您不必等待它通过互联网下载，因此它基本上按照您在源中提供的顺序运行。例如（简化了一下以帮助解释）：

我们有两个文件：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秒钟，coinslider.js下载需要2秒钟。

时间1秒：两个文件仍在下载。

时间2秒：coinslider.js已完成下载并被执行。

时间5秒：jQuery.js已完成下载并被执行。

因为没有任何代码告诉浏览器现在立即执行coinslider.js，它会在2秒时运行并因为jQuery.js尚未执行而失败。

通过在coinslider.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>

删除它。