Internet Explorer Dynamic Image Insertion Bug
Here’s a great Internet Explorer bug that you might stumble on when working with javascript to dynamically insert images into the DOM. Apparently, Internet Explorer sometimes fails to render dynamically placed images. Microsoft even acknowledges the defect.
Microsoft does, however, provide some insight into what you can do to work around this browser flaw. Basically, you need to force the IE browser to run the insertion again. This is the basic idea:
- Give the browser an img tag without a src attribute to render while the document loads.
- After the document loads (such as during an onload function, or in whatever post-load function you need, use a setTimeout function to force the browser to render your image.
This may seem like quite a bit of overhead, but, in practice, it can be pretty simple. Here’s some example code:
if(navigator.appName.indexOf(’Internet Explorer’)!=-1){
document.body.removeChild(objImageContainer);
document.body.objImageContainer.childNodes[0].src = newImg.src;
setTimeout(’hackIe()’,10);
}
else {
// Regular old code
}function hackIe(){
document.body.appendChild(objImageContainer);
}
That should do it. According to Microsoft, this bug is do to the timing of when the browser attempts to render Document elements, so anything that disrupts this timing, like setTimeout or alert, will work to “fix” this bug. An extra function and browser sniff, but at least it’s a simple fix.
