jquery 附加图像不在 Chrome 中呈现，但在 IE9 中呈现答案

【问题标题】：jquery append image not rendering in Chrome but does in IE9jquery 附加图像不在 Chrome 中呈现，但在 IE9 中呈现
【发布时间】：2012-10-17 15:24:38
【问题描述】：

我似乎无法在 Chrome 22.0 中使用它，但它在 IE 9.0 中运行良好。我正在使用 jquery.min.js 版本 1.7.1。

文件 maint.php（这有点简化...）：

<?php if (isset($_POST['action']) && $_POST['action'] == 'start') {
    ... do stuff ...
    die;
?>
<html><head><script src="jquery.min.js" type="text/javascript"></script></head>
<body>
...
<center>
<form name="maint" method="post" action="maint.php">
<input id="action" type="hidden" name="action" value="noop"/>
<input type="button" value="Start" onClick="submitForm('start')"/>
</form>
<div id="workmsg"></div>
</center>
<script type="text/javascript">
function submitForm(action) {
    $('#workmsg').append('<h3>Please wait...</h3><br/><img src="work2.gif"/>');
    document.getElementById('action').value = action;
    document.maint.submit();
}
</script>
</body></html>

单击“开始”按钮会显示消息“请稍候...”并显示 work2.gif 动画并提交（向自身）执行某些操作，同时显示消息和 GIF。

或者至少它在 IE9 上是这样工作的。

在 Chrome 上显示消息，但不显示 GIF。

知道为什么吗？

如果我直接浏览，Chrome 会呈现 GIF。

【问题讨论】：

您是否尝试在 chrome 中检查 div 上的元素？ #workmsg 是否添加了 img 标签？
我看不出 Chrome 不显示图像的原因。当我测试它时，它在 jsFiddle 中运行良好。

标签： jquery google-chrome cross-browser

【解决方案1】：

如果这是我以前多次遇到的“那个老栗子”，请将代码的提交行更改为...

setTimeout(function() { document.maint.submit(); }, 500);

您可以尝试更短的超时时间，但这应该足够了，前提是您遇到了与我之前遇到的相同的问题。在触发提交之前，浏览器可能只需要很短的时间来初始化图像元素。

【讨论】：

你不会相信有多少次这是烦人的答案；）