jQuery .cycle() 在第一次加载时在 Webkit 浏览器 [Safari / Chrome] 中不可见（刷新后一切正常！）答案

【问题标题】：jQuery .cycle() is invisible in Webkit browsers [Safari / Chrome] on first load (after refresh everything works fine!)jQuery .cycle() 在第一次加载时在 Webkit 浏览器 [Safari / Chrome] 中不可见（刷新后一切正常！）
【发布时间】：2012-08-09 16:26:43
【问题描述】：

我正在使用jQuery cycle 来实现幻灯片效果。

您可以单击任何幻灯片图像以滑动到下一张。

这适用于所有浏览器。只有在 Safari 中，才会发生一些非常奇怪的事情。在第一页加载时，根本不显示幻灯片图像！重新加载页面后（通过刷新或点击地址栏旁边的“开始”按钮），一切正常。

这里发生了什么？难道我做错了什么？我该如何解决这个问题？

更新：

我正在使用最新版本的 jQuery 和 Cycle 插件。这是我用来调用 .cycle() 的代码：

if (1 < $('.image-list li').size()) {
 $('.image-list').cycle({ fx: 'uncover', speed: 200, timeout: 4000, next: $('.image-list li') }).addClass('image-list-cycle');
}

【问题讨论】：

是否有任何错误或其他线索可以帮助我们解决您的问题？
这似乎也发生在谷歌浏览器中。
感谢您的 cmets。我在帖子中添加了更多信息。

标签： jquery css safari cycle invisible

【解决方案1】：

使用$(window).load 代替$(document).ready 似乎也有帮助。

【讨论】：

有道理，因为window.onload 仅在所有图像加载后触发（因此它们的尺寸是已知的）。

【解决方案2】：

如果你只是在谷歌上搜索这个错误，你会发现很多人在将 jQuery 插件应用于图像时遇到了麻烦。麻烦通常发生在位置和展示方面。

我的感觉是，有时脚本在加载图像之前运行，并且用于循环图像的宽度/长度值是错误的。我建议您在页面中添加类似这样的内容（根据您的需要调整类和名称）：

<script type="text/javascript">
  $(document).ready(
    function() {
      $('.image-list li').each(function({$(this).css({
        [SET HERE POSITION, WIDTH, ETC]});});
      $('.image-list').cycle([OPTIONS]);});
</script>

【讨论】：

我在我的 CSS 中硬编码了 LI 的高度和宽度，这样就成功了。谢谢！