Image doesn't load when innerHTML changed

JavaScript
1

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=‘http://www.example.com/img/wait.gif’ 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?

2

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

3

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>

4

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.

5

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

6 

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

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

7

Please check PM.

8

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.
Solutions:

  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…

9

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

<html>

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

<body onload=“showWaitImage()”>

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

</body>

</html>

10

@AllanP,
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: