CODEWITHSUNDEEP
jqueryqueuefadein
patnz
patnz

Reputation: 1141

Jquery - fadeIn - jerky fadein

I've made a simple image switcher that fades different logos in and out. Example and full source code at http://bit.ly/ewrSgp . I fadeout the image, then queue a src attribute change, then fade back in. It seems to work smoothly for a while but after 20 seconds or so it starts to fade the image back in before changing the src, which then changes instantly and looks ugly. Am I doing this right?

The code that runs the change is:

// fadeout old image, change to new and fadeback in.
// Call function changeimage again.
$(imToChange).fadeOut(600).queue(function (n) {
    jQuery(this).attr('src', newimageSrc);
    n();
}).fadeIn(1000, function () {
    setTimeout(function () {
        //recall image change function
        changeImage(indexToChange);
    }, o.delay);
});

Thanks in advance.

Upvotes: 0

Views: 1429

Answers (4)

Lex
Lex

Reputation: 1378

Specify width and height for img tag.

Upvotes: 0

Nathan Long
Nathan Long

Reputation: 125942

Another solution: instead of changing the source of the image, how about using jQuery's .load() or .get() to replace it? Then you could use a callback function, which only fires after the loading is done, to fade it back in.

Upvotes: 1

Nathan Long
Nathan Long

Reputation: 125942

I saw some flickers, but not many. I noticed that it happened on a particular logo, I think the first time I saw it, but not the next time, which makes me think that once it's loaded, it's fine. Some thoughts:

  • Does this happen if the images are all local (and hence load very quickly)?
  • Have you tried preloading the images?
  • If preloading works, what do you think about putting them all in a sprite? Only one http request to make.

Upvotes: 1

Joel
Joel

Reputation: 19358

I think you need to wait for the image to finish loading. I'd try displaying the image outside the visible area or behind some other image until the onload event fires, then move it and fade it in at the proper location.

Something like this.

var img = $("<img href='newimage.png' />").load(function() { movit(); fadeit(); });
$("#ahiddenelement").append(img);

Upvotes: 1

Related Questions