Multiple images being loaded with onload to call function and only last one loaded calls the function

Multiple images being loaded with onload to call function and only last
one loaded calls the function

I have multiple images being loaded from my database with an
onload="imgLoaded($(this));" that when is called gives the ability to the
image to be draggable, resizable and deletable.
Images:
<img src='data:image/".$ext.";base64,".base64_encode(XXXXX)."'
style=\"width:inherit; height:inherit;\" class='img_set'
onload=\"imgLoaded($(this));\">
Function imgLoaded:
function imgLoaded(imgElemt)
{
$('.db_result').html('<img src="images/loader.gif" />');
var full_url = document.URL;
if(full_url.indexOf('idedit') <= 0 || imgAreaMap > 0){
if(imgElemt.closest(".child").width() < imgElemt.width() ||
imgElemt.closest(".child").height() < imgElemt.height()){
if(imgElemt.closest(".child").width() >
imgElemt.closest(".child").height()){
imgElemt.parent(".imgh").height("100%");
imgElemt.parent(".imgh").width(imgElemt.width());
}else{
imgElemt.parent(".imgh").width("100%");
imgElemt.parent(".imgh").height(imgElemt.height());
}
}
else{
imgElemt.parent(".imgh").width(imgElemt.width());
}
}
$('.db_result').delay(500).queue(function(n) { $(this).html(''); });
$('#liveDimensions').text('Largura: '+imgElemt.width()+' px\nAltura:
'+imgElemt.height()+' px');
$('.imgh').on( 'resize', function( event, ui ) {
$('#liveDimensions').text('Largura: '+$(this).width()+'
px\nAltura: '+$(this).height()+' px');
});
imgElemt.parent('.imgh').append('<div class=\"close\"><img
src=\"images/delete.png\"/></div>');
imgElemt.closest('.child').children('.fileinput-holder').remove();
imgElemt.closest('.imgh').draggable({ containment:
imgElemt.closest('.child'), scroll: true, snap: true, snapTolerance: 5
});
imgElemt.closest('.imgh').resizable({ containment:
imgElemt.closest('.child') });
}
My problem is that only the last image loaded calls the function imgLoaded.
How can I force all the onload to happen for each single loaded image?