Javascript 硬币 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 文件确实正确加载(文件)。

这会让您假设它没有在正确的时间加载文件。

再次检查您的来源表明您没有将coinslider初始化包装到document.ready中调用，因此调用出现故障。

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

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

我们包含 2 个文件:jQuery.js 和 coinlider.js，并且我们按该顺序包含它们(首先是 jQuery)。

我们的 coinlider.js 文件引用了 jQuery，并且需要加载 jQuery 才能执行。

在本示例中，我们假设两个 js 文件位于同一服务器上，但 jQuery.js 文件比coinslider.js 文件大很多。由于该文件大小，jQuery.js 文件的下载时间比coinslider.js 文件要长得多(实际上，它不仅取决于文件大小，还取决于服务器位于世界上的位置 - 延迟 - 并且还取决于文件大小)。您和服务器之间的互联网速度)。

假设 2 个下载请求(1 个用于 jQuery.js，1 个用于 coinlider.js)基本上在同一时间(时间 0 秒)发送。下载 jQuery.js 需要 5 秒，coinlider.js 下载需要 2 秒。

1 秒时:两个文件仍在下载中。

第 2 秒时:coinslider.js 已完成下载并执行。

第 5 秒时:jQuery.js 已完成下载并执行。

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

通过包装 document.ready围绕 coinlider.js 初始化的函数，我们告诉浏览器等待一切准备就绪后再执行，因此它将等到 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>

删除它。