Image replacement firing in Chrome...

Image replacement firing in Chrome...

Hello, my understanding is that one of the great benefits of $(document).ready() is that it will execute code once the DOM is ready, yet prior to content being loaded.

For my example, with what I'm observing in Chrome (I'm on a MAC), I'd like to replace a default image with a different image, without seeing jQuery do the work.  However, in Chrome, I see the original image for a brief instant before the jQuery replacement pops in.  Why the flicker of the original image?  Perhaps I'm not understanding the particulars of what is firing, and when its firing...

You can view online here, and refresh a few times to see the flicker in Chrome:


Here's my code, generalized for this post:
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $('#photo').attr('src', "imageY.jpg");
  4. });
  5. </script>

  7. <div>    
  8.     <img id="photo" src="imageX.jpg" />
  9. </div>
On a larger site, with more content loading, the flicker effect is more pronounced, and does not provide an elegant end-user experience.  Perhaps I'm missing something...

Thanks for any help!