Search code examples
jqueryajaximagedelay

Delay the display of image loaded using jquery + ajax

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.

Solution

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

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

    quick demo see codes