如何让jQuery的DIV更换立即生效

我有一个动态创建图像的JavaScript函数，然后显示无论是在一个div或者一个单独的页面上的图像。由于图像创建需要几秒钟，我想，这样用户就知道有事情发生，显示一个简单的“请稍候”消息，而我用一些文本替换初始为空div的内容做这个。如何让jQuery的DIV更换立即生效

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

这个工作正常 - 单击触发链接时立即显示div内容。问题是，当我在它后面添加实际的图像创建代码时，“请稍等”直到图像创建完成后才显示出来，并且只有一瞬间，所以这没有意义。

有什么样的冲洗方法，以确保所有的行动在继续之前已经生效？如果有另外一个更好的办法来做到这一点，我很高兴听到这个消息......

------------- -----------编辑------

下面是我在做什么，使用开放闪光图表，以使图像更为完整的描述：

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

来源

2011-08-22 iforce2d

你可以发布你的一些标记和代码，所以我们可以看到您的来龙去脉？ – f0x

已在第一篇文章中添加。 – iforce2d

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

来源

2011-08-22 07:48:44

这是因为图像是没有加载，它需要一些时间浏览器加载它，然后才能显示它。

你可以加载这个样子，（假设包含图像的DIV的ID为#imageContainer）尝试使用jquery.load（）方法，增加了对图像的事件的回调：

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

来源

2011-08-22 07:49:45 DenisPostu

从评估你的代码，我肯定会分裂它：

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 
}

来源

2011-08-22 08:58:08 f0x

在整个原始onClick调用返回之前，似乎没有任何方法让操作生效，所以这不是一个完全的答案，但它使我走上了正确的轨道。我正在使用setTimeout错误，setTimeout（“”，1000）如上所述基本上什么也没有做，甚至没有像我打算插入暂停。需要什么像setTimeout（“chartGenerationComplete”，1000）与window.location.href = ...;在chartGenerationComplete函数里面。 – iforce2d

如何让jQuery的DIV更换立即生效

回答

相关问题