Question

我有一个动态创建图像的javascript函数，然后在div或单独的页面上显示该图像。由于图像创建需要几秒钟，我想显示一个简单的“请等待”消息，以便用户知道正在发生的事情，我这样做是通过用一些文本替换最初空的div的内容。

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

这在它自己的工作正常 - 单击触发链接时立即显示div内容。问题是当我在它之后添加实际的图像创建代码时，“请等待”直到图像创建完成后才会显示，并且仅在瞬间显示，所以它有点无意义。

是否有类似flush方法的东西确保所有操作在继续之前生效？或者，如果有更好的方法，我很高兴听到它......

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

以下是使用开放式闪存图制作图像的更完整描述：

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);
}

'请等待'似乎在最后一行之前生效。如果我在那时再次更改div的内容，则“请稍候”永远不会显示。

（根据我正在使用的图表的文档，当上传完成时应该调用函数'doneChartUpload'，这将消除对setTimeout的需要，但我花了很长时间试图让它工作，即使从下面的页面逐字复制代码，也无济于事。） http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php

Answer 1

这是因为图像尚未加载，浏览器在显示之前需要一些时间加载它。

您可以尝试使用jquery.load（）方法为正在加载的图像事件添加回调，（假设包含图像的div具有id #imageContainer）：

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

Answer 2

从评估你的代码我肯定会把它分开：

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
}

Answer 3

BlockUI是用于这些情况的好工具：http://jquery.malsup.com/block/。在这两种情况下（使用BlockUI或自己滚动），首先触发“等待”代码，运行图像生成器，然后在加载图像后删除等待效果。

如何使jquery div替换立即生效

3 个答案: