IE8 not displaying images (red x) ... sometimes

Question

I'm going mad with the following problem which does not happen on any other browser (Chrome, Firefox):

• IE8 cache is cleared
• browser starts opens HTML/Javascript page that requests and creates a few images dynamically. This HTML page is served from a Tomcat server localhost:8084.
• Most of the time out of 10 images that are requested IE displays RED X.
• Developer Image Report (F12) shows some images "file size" as correct # bytes, yet the image is still not displayed, or some images file size "unknown bytes" and image doesn't work.
• Sometimes 2-4 out of 10 images show up and the rest fail!
• Sometimes in a mad fury of hitting refresh 1 billion times, the images show up.
• The real kicker is that when I put a break point in my HTTP Server, the socket isn't even opened. IE isn't even attempting to fetch the images from the server before failing.
• And finally if I run the same code but request an image from somewhere like google maps, it works in IE without problems.

Here's my javascript code:

<script type="text/javascript">
    var ctr = 0;
    function getImage(url)
    {
        var img = document.createElement("img");
        img.src = url + "&nc=" + ctr;
        ctr ++;
        img.width = 128;
        img.height = 128;
        document.body.appendChild(img);
    }

    for (var i = 0; i < 10; i=i+1)
    {
        //THIS FAILS MOST OF THE TIME
        setTimeout("getImage('http://myHostName:9980/GenerateImageStatic?parameter=1')", 1000);
        //THIS WORKS! WHY?
        //setTimeout("getImage('http://maps.google.com:80/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false')", 1000);
    }
</script>

For HTTP Server I'm using BOOST sample ASIO HTTP Server Link I modified it so for any URI request, it sends a png file (I've tried various files to make sure it's not PNG encoding that's bad). The HTTP header has Content-type: "image/png". So correct mime type is sent.

I've been trying to find a solution for a long time. Read through various posts:

• Mime type is the problem. Mime type is not the problem in my case. I set the Content-type. I've also used Firefox LiveHTTPHeader plugin to view the headers sent from the server. Except for some cache control headers, my headers are same as what google sends in terms of Content-type:
• Security error. Ok maybe the cross domain images are a security risk. Or something is blocking the request. Well then why doesn't it fail 100% of the time?! Why does IE not request any cross domain images? Yet maps.google.com request works, and mine only works sometimes. Same applies to any firewall or anti-virus. I've also tried running the server on various ports (80, 8080, 9980).
• Javascript error. I think the Javascript is correct. I was actually getting the same problem with GWT. So I thought it was GWT that was the problem. And there was an event bug with IE and GWT related to images. So I simplified the code to just Javascript. no GWT.
• Maybe it's the C++ HTTP Server implementation. It's a possibility. However Firefox and chrome work with the same code without problems.

Any ideas? Thanks.

EDIT I added myHostName to trusted sites. I also lowered the security settings to low for internal and internet sites. I'm going to try to disable keepalive on the server if enabled. However as I mentioned I don't see IE making an attempt to fetch the image at all. The socket doesn't receive any requests from IE, so removing keep-alive from headers may not help.

Answer 1

Check what color mode your images are in.

I have accidentally switched the color mode of an image from RGB8 to CMYK in Photoshop, and ran into the same problem. IE8 would fail to display the image, while Firefox would have no trouble at all.

Answer 2

I believe that in IE you need to set the source after the element is appended to the DOM, otherwise it won't render correctly.