js Dynamic Load picture, take a picture width and height and scale

Recently encountered a problem in the project: 

After a drop-down box to change the background to take a picture to a page impression marquee acquisition coordinates, but does not know how much of the picture, it will get back the image to zoom geometric.

The question is: get back to the picture I first there is a hidden img, and then dynamically generate an img tag to display this img height to width is taken to hide img height to width on the line scaling, src is hidden img path but now for the first time, then how can not obtain high hidden img width value.

the first time:

var imgTd = $('#imgTd');
					imgTd.html('');
					$('#img1').attr('src', data.path);
					var img1 = document.getElementById('img1');
					var img = $('<img />', {'id': 'img2','width': (img1.width/2),'height': (img1.height/3),'src': (img1.src)});
					img.appendTo(imgTd);

This code is above the first img1 always get less than the height to width.

the second time:

var imgTd = $('#imgTd');
					imgTd.html('');
					var im = new Image();
					im.src = data.path;
				    $(im).load(function(){
				      	$('#img1').attr('src', data.path);
				    	var img = $('<img />', {'id': 'img2','width': (im.width/2),'height': (im.height/3),'src': (im.src)});
						img.appendTo(imgTd);
				    });

This would at first after the image is loaded can get to the picture's aspect