Load dynamically generated images from cache

Hello I have this callback function when an image is uploaded to the server and I then want to show this image as a thumbnail generated by a PHP script

'onComplete'  : function(event, ID, fileObj, name,response, data) {
          var newfile = '/admin/includes/image.php?filename='+name+'&maxw=150';
          $('#uploaded_images').append('<li class="'+ID+'"><img src="/site_images/ajax-loader.gif"" alt="" /></li>').fadeIn('fast');
          $.get(newfile, function(){
                $('.'+ID).fadeOut().empty();
                $("."+ID).append('<img src="'+newfile+'" alt="" />').fadeIn();


});

the ".get" jquery开发者_高级运维 function is supposed to show the img tag only after the image is loaded (and it does) the problem is that when I print the img tag the image is loaded again. This practically only fadesIn the "container" of the image. The image will continue to appear only when loaded and without any effect. Is there a way I can arrange the script to use the image cached with "get" or actually print everything only when the image is loaded directly?

Thank you

Instead of $.get(), use the .load() event of the image, like this:

$("<img />").load(function() {
  var img = this;
  $('.'+ID).fadeOut(function() { $(this).html(img); }).fadeIn();
}).attr("src", newfile);

What this does is when the image element we're creating finishes loading, fade out the .ID element, when the fade finishes, set the content to the <img> element (.html(elem) is a shortcut for .empty().append()), then fade it back in.