[jQuery] Image Load and fade in

[jQuery] Image Load and fade in


I have used a tutorial online (jQuery for designers) and have created
a image load and fade in after the dom is ready. In firefox 2.0.0 it
will not load. I just see the little swirly load image. Is there
something wrong with my code?
You can see my code at http://idea-labs.com/profile/jamesduffy
Or here is the main snip:
Styles in CSS file:
DIV#loader {
    border: 1px solid #ccc;
    width: 200px;
    height: 300px;
    overflow: hidden;
}
DIV#loader.loading {
    background: url(/assets/images/spinner.gif) no-repeat center center;
}
Javascript in file. (embedded in body):
<div id="loader" class="loading" style="border: 1px solid #ccc;">
            <script type="text/javascript">
            <!--
            jQuery(function () {
                var img = new Image();
                jQuery(img).load(function () {
                    //$(this).css('display', 'none'); // .hide() doesn't work in
Safari when the element isn't on the DOM already
                    jQuery(this).hide();
                    jQuery('#loader').removeClass('loading').append(this);
                    jQuery(this).fadeIn();
                }).error(function () {
                    // notify the user that the image could not be loaded
                }).attr('src', 'http://idea-labs.com/data/profilePics/<?=$profile
['pictureFull']?>').attr('width', 200);
            });
            //-->
            </script>
</div>
Thanks for the help in advance.