IE6, IE7, IE8 not displaying images inserted using jquery .html unless user right-clicks --> 'Show Picture' (Flash also on page)

Question

Hi All

I've got a strange issue which crops up in IE (6, 7 and 8) and when Flash is on a page: images display intermittently.

• Refreshing the page several times may or may not make the image display.
• Approximately 50% of the time the image displays
• If the image is not displayed there is space for the image and right-clicking 'Show Picture' will display the image.
• The problem does not appear in Safari, Firefox or Chrome.

Images are being inserted into the page using:

$(document).ready(function()
{
 $('#MyDiv').html('<img src="tick_med.png" alt="tick">'+ // <-- displays intermittently
               'test'); // <-- this will always appear OK
});

I have tried:

• Using five different images (jpg and png)
• Using different IE versions
• Using a local (mac MAMP) and remote server
• Using ".load(fileName)" instead of ".html"
• Delaying the ".html" function by 5 seconds using show(500) and a callback function.

Help!

Rob

Answer 1

It could be a DOCTYPE issue. If you're using a STRICT (possibly Transitional as well) DOCTYPE you'll need to have the tag be self closing.

<img src="tick_med.png" alt="tick" />

Note the closing slash.

Answer 2

If it's only happening in IE, you might look into putting the defer attribute into the script tag where your code runs from. The format is:

<script type="text/javascript" src="myscript.js" defer></script>

or in a strict DOCTYPE and XHTML you would render it

<script type="text/javascript" src="myscript.js" defer="defer"></script>

I'm not guaranteeing this will solve your problem, but it's something I would at least try. If it doesn't work there, you could also try it in the script that loads the Flash movie.