Creating an image in jQuery and adding to DOM after load

Question

I have a function that creates an image object. I give the image a src and then I add a load function that adds the image to the DOM once loaded. It works except it's always adding 2 instances of the image to the page and I can't figure out why. Can someone tell me why this adds two images to my page?

var img = new Image();

$(img).load(function () {               
    $('#imageContainter').append(this);
    $(this).fadeIn();
})              
.error(function () {
    // notify the user that the image could not be loaded
})              
.attr('src', '' + _filename);   

"_filename" is the source path and "imageContainer" is the div that I load the image into.

Any help would be greatly appreciated.

Answer 1

$(new Image()).attr('src', '' + _filename).appendTo($('#imageContainter')).fadeIn();

Then if the 'error' part is important you can check the src or something.

I would also recommend using show() instead of fadeIn() if you're not supplying any fade time