1

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.

Improve this question
2
  • 1
    Its not the answer to your question but have you looked at .load()? its shorthand for what you are trying to do above. : $('#result').load('ajax/test.html #container'); More info here: api.jquery.com/load As for your question, have you tried pulling the image in via ajax and then inserting it? (I mean another ajax call to the image url after you get the url from the markup returned by your first call) HTH Commented May 13, 2010 at 15:15
  • hi danny, thanks for the response, i tried using .load() but with the same results, I still see any data returned being displayed as it is loading. Commented May 14, 2010 at 1:29

2 Answers 2

Reset to default
2

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

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

quick demo see codes

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thanks for the reply, i like the demos and also 'JS Bin', I have never seen it before, i love the code/preview options. I like the idea of hiding then showing on load complete. Have u some ideas to keep the original image displayed, then show the new image once load is complete. Thanku for your help, Nic.
0

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/

Improve this answer

1 Comment

hi nikita, the image is extracted from the data recieved from the ajax call by using " .find('center').html(); " (as the image is embedded in a html <center> tag), once I have this html data i then insert it into a Div called #BFX, at no stage was the $(img).load() event fired ..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.