Question

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

Answer 1

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.