Hi Allan,
>From looking at your code, you're not actually preloading the rollover
image.
This is an old preloader I had knocking about, I'm sure it can be
jQuery'fied:
You just need to pass in an array of images to preload...
var images = ['image1.gif', 'image2.gif'] etc...
preloadImages(images);
function preloadImages(imgs, imgNo) {
// If the imgNo has been passed back into the function we increment
it by 1, else we default it to 0
var imgNo = (typeof imgNo == 'undefined') ? 0 : imgNo+1;
// If there are still images waiting in the array to be preloaded we
create a new Image object and assign the source
if (imgs[imgNo]) {
var img = new Image();
img.src = imgs[imgNo];
// When the image finishes loading we pass the array and the
imgNo
back into the function
img.onload = function() { preloadImages(imgs, imgNo); }
// If there's an error with the image, pass array and imgNo back
into the function to continue loop
img.onerror = function() { preloadImages(imgs, imgNo); }
}
}
Hope it helps. BTW, if you're looking to support IE 5.5, it has
issues with the image.onload function, never had a chance to look into
it though.
Lee
On Dec 1, 9:58 pm, "Allan Mullan" <[EMAIL PROTECTED]> wrote:
> Hey Lee,
>
> Thanks for that but I am already preloading the images in a div and am using
> the .onload method to do the mouseover effects... Also not sure if I could
> optimize the images even better, they are pretty tiny for what they are.
>
> Cheers,
> Allan
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Of [EMAIL PROTECTED]
> Sent: Sunday, 2 December 2007 1:02 a.m.
> To: jQuery (English)
> Subject: [jQuery] Re: Firefox/Opera JS bug?
>
> Hi Allan,
>
> The reason is because there is a temporary pause where the image is
> loading the new rollover, while your javascript is continuing it's
> script and changing the height of the image to your new
> specifications. So the old image appears stretched until the new image
> has loaded and can be replaced.
>
> There are a few solutions available, the easiest may be to optimise
> your images so their weight is much smaller, this should allow them to
> load quicker and hopefully eliminate the problem. However this may
> still occur for people on slower bandwidths.
>
> Another solution would be to preload the images with a simple
> javascript based preloader. There are a few jQuery based ones knocking
> around.
>
> A third solution would be to use the .onload method and attach it to
> your image. Such as:
>
> this.onload = function() {
> // Apply new height and width rules...
> }
>
> Alternatively, my personal suggestion would be a more complex one
> using css, background images, an image matrix and simply allocate a
> class to the anchors of 'selected' when they are rolled over, allowing
> specific rules to be applied. However, thats a much longer
> explanation needed to achieve this, although I believe we should be
> looking to keep behaviour and presentation seperate from each other.
>
> Hope this helps.
>
> Lee
>
> On Dec 1, 10:12 am, "Allan Mullan" <[EMAIL PROTECTED]> wrote:
> > Hey all,
>
> > Got a bit of a strange (bug?) one, am using JS to replace an image
> > onmouseover and it's working fine in IE6 and Safari but in Firefox and
> Opera
> > (latest beta) the images seem to stretch before going back to their proper
> > size, and same onmouseout when they return to their original image...
>
> > The site is currently located athttp://www.skorpion.geek.nz/g7/-you'll
> > have to excuse the annoying site (I've muted the irritating sheep noises
> > lol), it's a job that I've been given to do and this is the last problem
> > with it.
>
> > Would be great to know if i'm doing something wrong or if it is actually a
> > bug of some sort.
>
> > Thanks in advance,
>
> > Allan
