开发者

Problem with JQuery Cycle Plugin, Webkit Browsers and images

开发者 https://www.devze.com 2023-03-26 11:58 出处:网络
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

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 ima开发者_如何学Cge. 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" />


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消