IE8 not displaying images (red x) … sometimes

问题:

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.

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

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

回答3:

It sounds like an issue with your server. A few things to try, to narrow down the problem:

See if it works statically. That is make a flat html page that includes these images. Do they show up?

Try changing it so that your timer executes a single function that does a loop, rather than calling the timer in a loop.

Have it do a document.write (at page load, without any timers), simply writing the html for the elements (along with the urls so you can see what it is doing)

Have it do it, rather than with a timer, in response to clicking a button on the page. Have it do one image at a time.

I think if you try all these things, you'll likely arrive at the problem, but if not, report back what happens.

回答4:

I have the same problem with images not displaying in IE8 but ok in other browsers. This is even the case with locally saved files. If i open with IE8 I get red x, but every other program displays ok. I looked at the properties of the image and they originated from Photoshop, so I'm guessing it's the CMYK issue as stated above. If I save this image using RGB project, the issue is resolved.

回答5:

Yeah, I still don't know what the problem is. People have been suggesting it's CMYK. If that solution works for you, that's great. I'm using libPNG for encoding and RGB at all times. CMYK was not the problem for me.

I implemented HTTP server using Boost/asio http server sample #3. As well as Java Servlet. Same problems. Sometimes it works, sometimes it doesn't

I give up.