jQuery / javascript - refresh image after X seconds

I'm using a website thumbnail generation service, a开发者_开发问答nd I'm pulling out thumbnail images with javascript like:

$("body").append("<img class="thumbnail" src='http://s.wordpress.com/mshots/v1/"+url+"?w=200' width='200' />");

It works fine, but if the thumbnail is generated for the 1st time I get a "generating preview..." message, and I have to refresh the page to see the image.

so is there a way I can "refresh" the image after let's say 5 seconds, when it should be already generated?

I'd guess you could append a useless parameter to the URL to invalidate the browser cache and set the src attribute. It would be best to turn your append call into a appendTo call for this purpose, I think

$img = $('<img class="thumbnail" src="http://s.wordpress.com/mshots/v1/'+url+'?w=200" width="200" />').appendTo(document.body);
setTimeout(function(){
    $img.attr('src', function(i, oldSrc){
        return oldSrc + '&_=reload';
    });
}, 5000);

You're looking for the Javascript setTimeout method.

Yes, you can use setTimeout() funkcion. To force the image reload, you should attach a random parameter at the end of image's patch, for example,

domain.com/image.jpg?random_param=random_number

This will work in your case. Put your image in a "div" and then call the following function

function timestamp () {
    var id = //get_element from the div
    $("#id").append("<img class="thumbnail" src='http://s.wordpress.com/mshots/v1/"+url+"?w=200' width='200' />");
setTimeout("timestamp()", 60000);
}