Image doesn't load when innerHTML changed

Hello guys,

I’m trying to write function that will display some text and image by changing innerHTML of div element.

The function is:

function showWaitImage(){
document.getElementById(‘image’).innerHTML = “<span class=‘style’>Uploading photo, please wait…<img src=‘’ id=‘waitImage’ width=‘32’ heght=‘32’ /></span>”;

When I run this function, I see message and broken image in FireFox. I checked code and image URL like ten times, it should work, but it doesn’t.

How can I fix this?

height is spelled incorrectly.
Apart from that, it’s hard to tell without more context.

Thanks. I’ve changed to height. But I used single <img> tag before (without width and height), then I rewrite whole tag few times. It didn’t work and it doesn’t work now.

About more context. The div element is in HTML body:

<div id=“image”></div>

I call showWaitImage() function by this:

<input value=“Upload” type=“submit” class=“style” name=“photoSubmit” id=“photoSubmit” onClick=“showWaitImage();”>

showWaitImage() function is in <head></head>

Your code worked okay for me with a different image. Try changing the image used to another you know exists. If that works then it’s the image address that’s the problem.

URL is correct. I’ve tried another image. Still doesn’t work. :frowning:

function showWaitImage() {
var div = document.getElementById("image");
var sp = document.createElement("span");
var im = document.createElement("img");
im.src = "http://...";

Try something like the above.
If it still doesn’t work, your URL is dodgy.

Please check PM.

I know this is an old post and u must have found ur way out by now, but just updating the post for future followers who,like me ,came upon this post.

I think the problem is that, ur tryin got set the image right before a form submit.The form once submitted doesnt allow new server requests (even an image file).Even though u were settin the innerHTML before the submit,the javascript engine doesnt wait for the image to actually load before going to the submit().And the submit locks the page.So u neither get an image broken error or get to see the image.

  1. Prefetching the image when the page loads.
  2. set the innerhtml when the page loads and hide the div, and toggle the display/visiblitiy property when u submit.

Hope this helps…

This works, but needs an image at I have set it to run on page load for this example.


<style type=“text/css”>
body { font-family:arial; color:#000; background-color:#FFF; }
.style2 { font-size:13px; font-weight:bold; color:#F00; }
<script type=“text/javascript”>
// runs on page load in this example
// needs image at
function showWaitImage()
{ var build='<p><span class=“style2”>Uploading photo, please wait… <\/span>
build+=’<img src=“” id=“waitImage” width=“32” heght=“32”><\/p>

<body onload=“showWaitImage()”>

<div id=“image2”>
<!-- end image2 div –>



I see your example, i think the original poster had issues because he was trying to load an image right before a form SUBMIT.

Thanks anyways :slight_smile: