How to make jquery div replacement take effect instantly

I have a javascript function which creates an image dynamically, then shows that image either in a div or on a separate page. Since the image creation takes a few seconds I'd like to display a simple 'please wait' message so th开发者_开发知识库at the user knows something is happening, and I am doing this by replacing the contents of an initially empty div with some text.

$('#chartImage').html('Please wait...');

This works fine on it's own - the div contents are displayed immediately when the triggering link is clicked. The problem is when I add the actual image creation code after it, the 'please wait' does not show up until after the image creation is complete, and only for a split second, so it's kinda pointless.

Is there something like a flush method to make sure all actions have taken effect before continuing? Alternatively if there is a better way to do this I'm happy to hear it...

-------------EDIT-----------------

Here is a more complete description of what I'm doing, using open flash chart to make an image:

function createChartImage(chartid)
{
    $('#chartImageDiv'+chartid).html('Please wait...');

    ofc = findSWF("ofc_chart_"+chartid);
    x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false );

    setTimeout("",1000); //allow some time for upload to complete

    window.location.href = getViewChartImageURL(chartid);
}

The 'please wait' appears to take effect immediately before the final line. If I change the div's contents again at that point, the 'please wait' never shows at all.

(According to the docs for the charts I'm using, the function 'doneChartUpload' should be called when the upload is complete which would remove the need for the setTimeout, but I spent a long time trying to get it working, even copying code verbatim from the page below, to no avail.) http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php

From assessing your code i would definitely split it up:

function generateChartImageProcess(chartid){
    displayLoader();
    createChart(chartid);
}

function createChart(chartID){
    ofc = findSWF("ofc_chart_"+chartid);
    x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false );

    setTimeout("",1000); //these two lines here to be replaced by your chart generations complete process
    window.location.href = getViewChartImageURL(chartid);
}

function displayLoader(){
    $('#chartImageDiv'+chartid).html('Please wait...');
}

function chartGeneratedComplete(arguments){
    //TODO
}

This happens because the image isn't loaded yet, and it takes some time for the browser to load it before it can be displayed.

You could try using the jquery.load() method to add a callback for the event of the image being loaded like this, (supposing the div containing the image has the id #imageContainer):

$('#imageContainer img').load(function() {
  // Remove the Please wait
});

BlockUI is a good tool to use for these situations: http://jquery.malsup.com/block/. In both cases (using BlockUI or rolling your own), trigger the "waiting" code first, run your image generator, and then remove the waiting effect after the image is loaded.