imageinternet-explorerbroken-image

IE displaying broken images, 'show image' makes them display fine


On this site: http://wyattorr.reuniondesign.com/collections/spring-2013 Internet Explorer is intermittently displaying broken images. The first time I loaded the page most of the images loaded fine, however upon subsequent loads all images are showing as broken. If I right click and select 'show image' then the image shows up perfectly normal.

Possible issues: I'm using the jquery plugin imagesloaded, which might have something to do with it? You'd think that would just make the image hidden...

Interesting notes: The broken images are being displayed in their proper dimensions, which means that they've loaded and IE knows their dimensions.

I'm at the end of my IE expertise... Any ideas?


Solution

  • There is an open bug in imagesloaded for this.

    However, I have also seen this problem without using imagesloaded. Just like in your case, there were intermittent problems in IE with broken images (all the other major browsers were fine). It turned out the server was serving up images without content-type headers, and the problem went away when it was reconfigured to supply the correct headers.

    The bad headers seemed to expose an underlying issue with the way IE starts and aborts loading images (this behavior seems to be responsible for the imagesloaded bug too). IE tries to speed up page loads with a look ahead pre-parser that pre-emptively requests images before the main parser has a chance to do it. Sometimes IE will stop and restart the parsing process though.

    When this happens, IE aborts the pre-parser's image downloads. Depending on the timing, it apparently doesn't always restart the downloads, or else doesn't update the page with the fully downloaded images, leading to broken images (at least if the images lack content-type headers). Other browsers did not have this problem, even when the images were missing the content-type headers.

    Taking steps to prevent document mode restarts and making sure the server is correctly setting content-type headers for images may help.