0

I'm doing a postback to generate a chart. When the user clicks the button it is using jQuery to add some html to the page to show an animated gif and an overlay.

This works fine in IE and FF but in Chrome the image doesn't load. Anybody know what's going on here?

While looking into the problem I noticed that if I run this code in the JavaScript console it works, and it will work as expected after running it in the console (displays image on postback).

Here is the code I'm using to add the 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>");
Homer
  • 7,594
  • 14
  • 69
  • 109

1 Answers1

0

I've had similar problems with Chrome, fixed by preloading the image:

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

Alternately, you can just stick an extra <img> in the page.

Markup

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

CSS

/* uses the "off-left" technique*/
img.preload {
    position: absolute;
    left: -10000px;
}
Matt Ball
  • 354,903
  • 100
  • 647
  • 710