Delay the display of image loaded using jquery + ajax
- by niczoom
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.
