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.

Have you stepped through it in FireFox firebug or Chrome dev tools to see if it is getting called more than once? — Popo
– Popo, Commented May 30, 2013 at 16:44

php_nub_qq · Accepted Answer · 2014-03-24 14:18:19Z

4

$(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

edited Mar 24, 2014 at 14:18

answered May 30, 2013 at 16:44

php_nub_qq

16.1k25 gold badges84 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

php_nub_qq Over a year ago

My guess would be that when you append the new DOM element the load method executes because the new element is loaded and when you supply a new source it executes again cause of the new image source.

Collectives™ on Stack Overflow

Creating an image in jQuery and adding to DOM after load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related