Fading in large images in Chrome

Question

Hello, gurus!

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?

Answer 1

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")
});