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

Chrome中的回发可防止图片加载？

1 个答案:

标记

CSS