Fading in large images in Chrome

Question

I'm having some trouble fading in large images, but only in Chrome.

Here's the absolutely basic setup:

$(document).ready(function(){
   var img = new Image();
   $(img)
      .hide()
      .load(function(){
         $(this).fadeIn(3000)
      })
      .attr("src", "files/originals/01.jpg")
   $("body").append(img)
});

As far as I know this is the conventional way to create an image on the fly, load it, and fadeIn when it's done loading. Now, this works perfectly in FireFox, Safari and even IE, but not in Chrome when I use large images (resolutions greater than 1900x1200). And before someone flames about the size I should add that it's a requirement for the project. What happens in all browsers but Chrome is that there's a delay while the image is loading (expected) and as soon as it's done it fades in. In Chrome I get the regular delay while the image is loading and then another delay for the duration of the fadeIn (in my example 3000ms) after which the image simply "appears" as if I used show(). Smaller images work perfectly in all browsers though.

What gives? What is it I am missing?

I've tried your code with FF, IE and Chrome and all work great for me. Take a look here and give it a try. I've put together your function, betamax solution and another small variation from me. Loading of the image could take a moment. It's 2mb and is loaded from imageshack. — Andreas
Hmm, it might be something with the computer, because when I tried my own code again this morning it worked! Cleared cache and everything and was unable to re-create the issue. Thank you both for the help! — Alexander Filatov

betamax betamax · Accepted Answer · 2010-10-20T16:16:12

Maybe try moving the insert of the image into the DOM once it has loaded? Like this:

$(document).ready(function(){
   var img = new Image();
   $(img)
      .hide()
      .load(function(){
         $("body").append(this);
         $(this).fadeIn(3000);
      })
      .attr("src", "files/originals/01.jpg")
});

Fading in large images in Chrome

1 Answers