dom - Make sure image has loaded before do something with jQuery -

i have gallery on app. there plenty of thumbnails fadeout make room new thumbnails. know can preload on div, set timeout , change thumbnail src preloaded one. but, not guarantee image loaded, right? now, im doing this:

var img = $('<img />'); img.attr('src','path/to/img');  img.on('load',function(){     // change src     // fadeout     // fadein }); 

it appears working, have questions:

1. will work when requested url responds 404?
2. i've set timeout run every 3 seconds. bad?
3. i don't know how javascript works in general, so, creating new img element on each execution of code can give me trouble? i'm worried because don't know if stacked somewhere (this code can running hours).

1. you can use jquery's .fail() functionality. e.g.:

   img.on('load', function() {     // stuff here }) .fail(function() {     // whatever want here }); 

2. it depends on js-engine. older ie had leaks. after timeout done, it's done. can see nothing bad here. modern apps/webpages have scripts running little timeout no harm.

3. i'd remove unused img-elements. otherwise might blow dom.