Question

我正在尝试使用JQuery创建动画横幅，而不是使用动画gif。 Cycle Plugin在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" />

Answer 1

持久性得到回报。事实证明，问题不在于JQuery，Cycle Plugin或Webkit浏览器，而在于图像。我用来创建GIF的源PSD在动画时间轴中保存了Photoshop图层，当我在Photoshop中使用“Save for Web＆amp; Devices”时，数据被包含在内 - 有趣的是它在Firefox中没有出现问题。解决方案是在动画调色板中简单地“删除动画”并再次保存GIF。

感谢所有考虑过这一点的人。

JQuery Cycle Plugin，Webkit浏览器和图像的问题

1 个答案: