I have a simple slide show where I fade out the current photo before displaying the new one. It works great under FF and IE, but effect is very laggy in Chrome...
I spotted that lagginess in Chrome appears only on large scaled images
Here is the code to reproduce :
this.oldimg = this.img;
this.img = new Image();
$(this.img).css({width: '90%', height: '90%'});
$(this.img).attr("src", "//file.jpg");
$("body").prepend(this.img);
if(this.oldimg) $(this.oldimg).fadeTo(600, 0, function() { $(this).remove(); });
Working demo here : http://jsfiddle.net/f3tta/18/embedded/result/
(Note: Comments were made in reference to a previous demo avoiding browser cache here)
Can you reproduce? What solution do I have to avoid the lagginess without having to serve perfectly scaled images ?
Ok, so if anybody comes here with the same problem, I found a solution to bypass the issue :
if(this.oldimg) $(this.oldimg).delay(50).fadeTo(600, 0, function() { $(this).remove();
I don't know why, when we delay the fading out a little, chrome play the effect almost normally.