Delay the display of image loaded using jquery + ajax

Question

I am using the following code :

   $.ajax({
        url: "pgiproxy.php",
        data: ({ data : $("#formdata").serialize(), mode : "graph"}),
        success: 
            function(result){
                var temp = $('<div/>').html(result);
                var val = temp.find('center').html();
                $('#BFX').html(val);
            },
        error:
            function(){
                $("#error").html("ERROR !!!");
            }
    });

The 'result' from the ajax call to 'pgiproxy.php' is a whole web page (returned as a string), this is then converted to a jQuery object and stored in 'var'. I then extract the data I need (a .gif image) using .find() which is stored in 'val'. This image is then inserted into a #BFX div for display.

My problem is every successive time I click my button to update this image it shows the image loading from top to bottom as it is reading it in from the web. Is there a way to only display this image once it has fully loaded so the user doesnt see the image loading and only sees the image change instantly.

Answer 1

You can do it all manually: loading image in the background and then inserting it into the page. There are several articles discussing topic in details, including this one:
http://jqueryfordesigners.com/image-loading/

Answer 2

use .load() load-event on <img>

hide the image first then show it when load complete...

quick demo see codes