Images not showing in IE

A very difficult problem with very simple solution.

When you run Internet Explorer, the Internet Explorer cache is not used as you expect when you run innerHTML code to insert the same image multiple times.

Here’s the problem: Internet Explorer forgets to look into its own cache when inserting HTML via JavaScript DOM manipulation (read: if you use img tags or any tags with CSS background images, Internet Explorer will always try to redownload these images).

To work around this problem, try following steps:

1. Preload the image in a DIV element with the display:none attribute:
   <DIV style='display:none'><IMG SRC='image.gif'></DIV>
   
2. Create a brief time-delay so that Internet Explorer has enough time to verify whether the image is in the cache, and then call the innerHTML property.
   setTimeout (function(){},2000);

Note: Make sure to add width and height of image otherwise it may display in very very small size like a dot.