JQuery Cycle 插件、Webkit 浏览器和图像的问题答案

【问题标题】：Problem with JQuery Cycle Plugin, Webkit Browsers and imagesJQuery Cycle 插件、Webkit 浏览器和图像的问题
【发布时间】：2011-08-05 23:03:16
【问题描述】：

我正在尝试使用 JQuery 创建动画横幅，而不是使用动画 gif。 Cycle 插件在 FireFox 中执行得很好，但在 Safari 和 Chrome 中，最初加载页面时，我没有观察到“幻灯片”，只看到一个图像。我试图通过 .load() 解决这个问题，预加载图像，并在后续图像上使用 display: hidden，每个都没有成功。奇怪的是，我注意到加载的单个图像实际上是所有图像中最小的图像（以文件大小计）。

感谢任何输入。我被难住了。

jQuery(document).ready(function() {
    $('#banner').cycle({
         fx: 'none',
     delay: 0,
     speed: 500,
     autostop: true,
         autostopCount: 8,
timeoutFn: function(currElement, nextElement, opts, isForward) {
          opts.myTimeoutCount = (opts.myTimeoutCount + 1) % opts.myTimeouts.length;
          return opts.myTimeouts[opts.myTimeoutCount];
    },
    myTimeouts: [1000,1000,500,500,500,2000,2000,1000],
    myTimeoutCount: 0
    });
});


<div id="banner">
    <img src="images/if_300x250_banner_1.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_2.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_3.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_4.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_5.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_6.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_7.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_8.gif" width="300" height="250" />

【问题讨论】：

您是否只想循环浏览每张图片，用前一张替换当前图片？
是的，Rob，这正是我想要做的。但是我确实需要能够控制每个图像的显示时间，因此需要 TimeoutFN 函数。

标签： jquery image webkit cycle

【解决方案1】：

坚持有回报。事实证明，问题不在于 JQuery、Cycle 插件或 Webkit 浏览器，而在于图像。我用来创建 gif 的源 PSD 将 Photoshop 图层保存在动画时间轴中，当我在 Photoshop 中使用“保存为 Web 和设备”时，这些数据被包含在内——有趣的是，它在 Firefox 中没有造成问题。解决方案是在动画面板中简单地“删除动画”并再次保存 gif。

感谢所有思考这个问题的人。

【讨论】：