image not loading via innerHtml

Posted on 2010-08-22
Last Modified: 2014-01-21
I have a web page that uses javascript to populate the innerHTML of a div with html returned by an ajax call to our server.  

var xmlhttp=createXMLHTTPObject();"GET",url,false);
var xmlDoc=xmlhttp.responseXML;
var html=xmlDoc.getElementsByTagName("info")[0];

Open in new window

Occasionally, one or more img's contained in the html do not display in IE or FF.  FF shows a failed image icon but IE shows nothing at all where the image should go.  If I hard code the exact same html into the div it works fine.  Debugging shows the img element where it should be with the correct src.  It has happens with 135 byte png's as well as 200k jpg's.  I have worked around this in IE by preloading the images just prior to assigning the html string to the div's innerHTML.  


Open in new window

But this workaround has no effect in FF.  It appears to be somehow related to timing since any delay introduced by debugging often causes them to display correctly.  Does anyone have any suggestions as to the cause and/or solution to this problem.
Question by:wthengineering

Expert Comment

ID: 33497915
can you post the source of the img tag? One possibility is you are missing the / at the end ... though this only half the time has any effect...

Author Comment

ID: 33497938
Here is an example of the full html being assigned to the div's innerHTML.  the "tgis/minus.png" image is the one that doesn't show.  Note: even when i strip out the onmouseup event i get same results.

<b>Search Results For</b><br>&nbsp;&nbsp;&nbsp;&nbsp;cheng<p><img src="tgis/minus.png" id="iid1" onmouseup="showHideTable(1);"><b>Parcels</b><br><table width=100% id="tid1" cellpadding="8"><tr><td width=12>&nbsp;</td><td style="background-color:#DFEFFC;"><a id=oli0 href="javascript:showf(10,1453)">19-06-15-400-070.042-002</a><br>Cheng, Kam Chuen</td></tr><tr><td width=12>&nbsp;</td><td style="background-color:#D0E5F5;"><a id=oli1 href="javascript:showf(10,6165)">19-06-26-103-714.000-002</a><br>Cheng, Kam Chuen</td></tr><tr><td width=12>&nbsp;</td><td style="background-color:#DFEFFC;"><a id=oli2 href="javascript:showf(10,6166)">19-06-26-103-715.000-002</a><br>Cheng, Kam Chuen</td></tr></table></p>

Expert Comment

ID: 33497947
you could try adding the trailing slash to the img tag

<img src="tgis/minus.png" id="iid1" onmouseup="showHideTable(1);"/>
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

LVL 58

Expert Comment

ID: 33497968
Even if you get around this issue, something else will crop up next time that can easily be solved just by using a proper framework like jQuery.

For what it's worth, I believe you have to wrap the html fragment in a DIV node for some browsers.  If the extra DIV node is an issue, a loop to re-parent the children of the DIV to the intended parent, then removal of the DIV is the solution.

Download and include jquery.js in the header.
//var xmlhttp=createXMLHTTPObject();



//var xmlDoc=xmlhttp.responseXML;

//var html=xmlDoc.getElementsByTagName("info")[0];


$.get(url, function(data) {



Open in new window

LVL 83

Expert Comment

by:Dave Baldwin
ID: 33498224
Your AJAX call seems to be incomplete and doesn't do any of the sequencing tests.  This page: shows how it should be written.   And below is a version from the W3Schools.  Either one should help you get your page working.
<script type="text/javascript">
function loadXMLDoc()
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  if (xmlhttp.readyState==4 && xmlhttp.status==200)

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>


Open in new window


Author Comment

ID: 33498302
Thanks for the above responses.  I have tried them all but still same results

I added the / to the end of the img tag.  I tried using the jquery html() function.  And I changed my ajax calls to be asynchronous.  

All tries successfully return and display the html but still a blank image.  And with all tries, if i right click on image location and choose "show Image" or "reload image" it displays fine and then all subsequent ajax calls display the image fine (assuming this is due to image now being cached)

I did discover a pattern.  It is related to how long the server takes to respond. As a test I hard coded the server to always send back the same html regardless of the request.  requests that take very little processing time on the server display perfectly upon return.  requests that take more than a couple seconds are the ones that result in the failed image.  Same HTML!  This led me to try the asynchronous call but still no workee.


Accepted Solution

wthengineering earned 0 total points
ID: 33500257
I found my problem.  Some later occuring code was issuing a stop command which was causing all objects in the process of downloading to stop.  Sorry for being so stupid.  But thanks again for the help

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Is there a way I can make this alert a little more pretty? 6 112
javascript/ajax 26 46
Does ajax call keeps an open connection to the server 2 62
alert before form submission 6 27
Hello World !, Thanks : My Sincere thanks to @Michael Male who encouraged me to write an article on this in my  blog ( Introduction:       There are several technical issues a developer may face in his…
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
Concerto provides fully managed cloud services and the expertise to provide an easy and reliable route to the cloud. Our best-in-class solutions help you address the toughest IT challenges, find new efficiencies and deliver the best application expe…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now