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'

这表明 coinslider 脚本尚未加载。不过，如果您检查源代码，您可以看到 javascript 文件确实正确加载(文件)。

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

再次检查您的来源表明您没有将 coinslider 初始化包装到 document.ready 中调用，所以调用是乱序的。

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

附注:它在本地工作而不在服务器上工作的原因是在本地加载文件几乎没有延迟。您不必等待它通过 Internet 下载，因此它基本上按照您在源代码中提供的顺序运行。例如(简化了一点以帮助解释):

我们包含 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 初始化函数，我们告诉浏览器在执行之前等待一切准备就绪，因此它会等到 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>

删除它。