Refresh image only

Question

I think this shouldn't be to hard, but for some reason I can't find out how to do it.

I've currently got a button that loads an image via ajax. Now if this button is clicked again, I want the image to refresh. So basically the functionality I'm looking for is an image refresh. But I want to refresh the image only, not the rest of the page.

My ajax function:

$.ajax({  
                type: "POST",  
                url: "<?php bloginfo('template_directory') ?>/test.php",  
                data: dataString,  
                success: function() {  
                //$('.images').empty();
                $('#div1').html(croppedImage);               
                }  
            });
            return false;

How do I go about refreshing the image?

-EDIT

I fixed it by adding a timestamp to the url.

$.ajax({  
                type: "POST",  
                url: "<?php bloginfo('template_directory') ?>/test.php",  
                data: dataString,  
                success: function() {  
                //$('.images').empty();
                $('#div1').html(croppedImage);               
                document.getElementById("refreshMe").src = "<?php bloginfo('template_directory') ?>/uploads/resized_<?php echo $newNameOverwrite; ?>"+"?"+new Date();
                }  
            });

It works, but the refresh rate is quite slow. I should have some sort of feedback in between loads.

Answer 1

Wrap a function around this. Call the function on doc ready, and also on button click.

function refreshImage() { /* YOUR CODE HERE */ }
$(function() {
    refreshImage();
    $("#button").on("click", refreshImage());
});