Chrome中的回发阻止图像加载？

Question

我正在回发以生成图表。当用户单击按钮时，它正在使用 jQuery 向页面添加一些 html 以显示动画 gif 和叠加层。

这在 IE 和 FF 中运行良好，但在 Chrome 中无法加载图像。有人知道这里发生了什么吗？

在调查问题时，我注意到如果我在 JavaScript 控制台中运行此代码，它可以工作，并且在控制台中运行后它会按预期工作（在回发时显示图像）。

这是我用来添加 html 的代码：

$("body")
.append("<div class='ui-widget-overlay working'></div>")
.append("<div class='ProcessMessage working'><img alt='Loading' src='images/indicator_big.gif' /><br /><br />Loading...</div>");

Answer 1

我在 Chrome 上遇到过类似的问题，已通过预加载图像解决：

new Image().src = 'images/indicator_big.gif';
// ...
$("body")
    .append("<div class='ui-widget-overlay working'></div>")
    .append("<div class='ProcessMessage working'><img alt='Loading' src='images/indicator_big.gif' /><br /><br />Loading...</div>");

或者，您可以在页面中添加一个额外的<img>。

标记

<img class="preload" src="images/indicator_big.gif"/>

CSS

/* uses the "off-left" technique*/
img.preload {
    position: absolute;
    left: -10000px;
}