JQuery Cycle 插件、Webkit 浏览器和图像的问题
我正在尝试使用 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" />
I am trying to create an animated banner using JQuery, rather than use an animated gif.
The Cycle Plugin executes this well in FireFox, but in Safari and Chrome, upon initially loading the page, I do not observe the "slideshow" and only see a single image. I have attempted to resolve this via .load(), preloading the images, and using display: hidden on the subsequent images, each without success. Curiously, I have noticed that the single image that does load is in fact the smallest image (in file size) of all the images.
Any input is appreciated. I am stumped.
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" />
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
坚持会有回报。事实证明，问题不在于 JQuery、Cycle Plugin 或 Webkit 浏览器，而在于图像。我用来创建 gif 的源 PSD 将 Photoshop 图层保存在动画时间轴中，当我在 Photoshop 中使用“保存为网络和设备”时，数据就被包含在内 - 有趣的是，它在 Firefox 中没有造成问题。解决方案是简单地在动画调色板中“删除动画”并再次保存 gif。
感谢所有思考这一问题的人。
Persistence pays off. It turned out that the problem was not with JQuery, the Cycle Plugin, or the Webkit browsers, but with the images. The source PSD that I used to create the gifs held the Photoshop layers in an animation timeline and that data was being included when I was using "Save for Web & Devices" in Photoshop- interesting that it did not pose a problem in Firefox. The solution was to simply "Delete Animation" in the Animation palette and save the gifs once more.
Thanks to all who pondered this one.