Image doesn't load when innerHTML changed

**al9** · Aug 13, 2007 14:01

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?

**r51** · Aug 13, 2007 14:05

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

**al9** · Aug 13, 2007 23:01

Originally Posted by r51

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:

I call showWaitImage() function by this:

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

**r51** · Aug 14, 2007 01:21

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.

**al9** · Aug 14, 2007 01:58

Originally Posted by r51

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.

**r51** · Aug 14, 2007 02:29

Code:

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.

**al9** · Aug 14, 2007 08:46

Please check PM.

**sajjan.sarkar** · Sep 22, 2010 05:57

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

**AllanP** · Sep 22, 2010 17:20

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

</style>
<script type="text/javascript">

</script>
</head>

<body onload="showWaitImage()">

<div id="image2">
</div>


</body>

</html>

**sajjan.sarkar** · Sep 23, 2010 05:09

@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

User Tag List

Thread: Image doesn't load when innerHTML changed

Thread Tools

Display

Image doesn't load when innerHTML changed

Bookmarks

Bookmarks

Posting Permissions