Question

我很难理解是什么原因导致我的jQuery脚本在第一次加载时正确加载（点击导航链接），但是在浏览器中点击“刷新”后就失败了。

这是一个简单的脚本，可循环显示一系列图像，全尺寸并以流畅的布局为中心。加载后，脚本应为图像设置适当的边距，以便将其置于屏幕中心。当您单击导航中的链接时，它似乎工作。当我刷新页面时，脚本失败，并为图像提供了一个左边距离的两倍，将照片偏移到屏幕的一侧。

幻灯片可以在这里看到。您应该能够通过刷新页面来复制错误，然后点击导航中的蓝色“tiburon residence”链接。（截图：http://imgur.com/a/z2hki）

http://dev.christinerode.com/garyhutton/tiburon.html

我已经尝试更改我的脚本和CSS包括的顺序，以及功能，但我没有运气。为什么这只会在某些刷新时发生？

使用jquery.cycle插件，但找不到任何其他此类事件。在javascript中发生了什么以触发相同代码的不同显示？

Answer 1

一些建议：

将所有脚本放在</body>标记之前。这样就可以确保在进行DOM元素大小测量之前加载文档：

  <script> // jquery // </script>
  <script> // cycle.plugin </script>
  <script> // your jQ functions // </script>

</body>

您可以添加if语句来检查幻灯片是否已设置动画，以防止在动画库动画时点击次数：

$("#slide_prev").click(function(){
   if( !($('.slideshow img').is(':animated') ) ){
      $('.slideshow').cycle("previous");
   }
});
$("#slide_next").click(function(){
   if( !($('.slideshow img').is(':animated') ) ){
      $('.slideshow').cycle("next");
   }
});

这样可以防止我对问题的评论中的问题。

如果您仍然有错误（我不建议，但您可以尝试）：

$(window).load(function(){
    // your functions
});

jQuery.Cycle在某些刷新时偏移图像

1 个答案: