jQuery animation issue

JavaScript
1

Hi there,

I’ve written a script to make a series of images into a kind of slideshow. It’s live here:

www.mikes-lab.com/luxe/

It works fine, except if you open another tab and surf the web for 15-20 mins, then click back on to the page, the animation has broken, and the slideshow behaves very strangely. Could it be something to do with setTimeout? Is there a jQuery method that I should be using?

Many thanks,
Mike

2

This is a bit hard to test since it looks like you’re referencing all four JS files from localhost, so the slideshow won’t run. You probably have them in the right place on your computer so it works for you.

Sounds like something wrong that’s hogging up memory as the slideshow runs, but without actually seeing the thing run it’s hard to tell.

3

Thanks for taking the time to have a look. I’ve sorted out the references for the jQuery scripts now, so it’s running ok.

Many thanks,
Mike

4

By that, I mean the script is now running, so you can see the issue. Not that its running ok, if anything its worse than when viewed locally.

5

Yeah, I was able to see it working and also reproduce the issue to some extent on Chrome. The animation get choppy and the images flicker. I couldn’t see anything obvious that would cause it, though. It’s not throwing JS errors even after running for a long time. When I get a chance I’ll try debugging it further, but a quick workaround might be to cycle the slides a few times and then stop. If they mouseover and mouseout again, it could start over. A hack, I know…

6

Thanks for taking another look raw10. I’d appreciate anymore feedback, since I seem to get this kinda behaviour a lot when doing this kind of animation with jQuery. Most of the time it’ll go under the client’s radar, but still, it bugs the hell out of me, and I’d love to know what’s causing it.

Best,
Mike

7

The issue is likely because Chrome slows or suspends JS execution for inactive tabs. You may have to listen to the window blur and focus events, and stop and start the slideshow accordingly.

8

Hi Jeff,

Thanks for your reply. I tried using a listener for the window blur and focus events, but if anything the issue became more pronounced. However, I did manage to fix the problem.

Here’s what I had:


function slide(i){
	if(!i){
		var i = ($('.slide .selected').index()) + 1;
		length = $('.slide').children().length;
		if(i >= length) i=0;
	}
	
	$('.slide').children().eq(i).animate({left:0}, 1200, function(){
		width = $('.slide .selected').width();
		$('.slide .selected').css({zIndex:100, left: width}).removeClass('selected');
		$(this).css({zIndex:0}).addClass('selected');
		$('.slide-nav-btn').removeClass('selected').eq(i).addClass('selected');
	});
	timer = setTimeout("slide()", delay); //This line causing the issue
	
}

so, there were a lot of animations being called, regardless whether the previous animation had completed.

If I move the setTimeout call to the anonymous function, the animations don’t mount up when the page is blurred. Simples!


function slide(i){
	if(!i){
		var i = ($('.slide .selected').index()) + 1;
		length = $('.slide').children().length;
		if(i >= length) i=0;
	}
	
	$('.slide').children().eq(i).animate({left:0}, 1200, function(){
		width = $('.slide .selected').width();
		$('.slide .selected').css({zIndex:100, left: width}).removeClass('selected');
		$(this).css({zIndex:0}).addClass('selected');
		$('.slide-nav-btn').removeClass('selected').eq(i).addClass('selected');
		timer = setTimeout("slide()", delay); //Moved to within the function
	});
	
}