[jQuery] Image Load and fade in

[James]

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.