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.

When writing a Web 2.0 app, function completes get to be pretty important. In fact, they’re the little signal that a function can send out to the larger program that says, “Hey, I’m done, now do something else”; callback like this is a pretty important thing.

Take the case of a web application that loads a list of items from an external source. Generally, most AJAX libraries, and even XHTTP request code that you roll on your own, gives you the opportunity to write a function that runs onsuccess. That’s great: when your code is done executing, bam!, your function runs. In most cases, that’s great. However, consider the case of a set of images loaded externally then inserted into the page dynamically: the images might be received from the server and stuck into the page, but they might not be fully rendered, depending on the environment.

I ran across this interesting little quirk while working on a Web 2.0 app using Flickr. I loaded a bunch of images from Flickr, dynamically built them and inserted them into my page, and, voila, they’d slowly render, dial-up modem style. Not optimal. I almost gave up until a quick Google showed me that, in face, Images Can “Call back,” too!

Thanks to evolt, I was able to come up with this little design pattern:

• In a for loop, iterate through an array of images to be added.
• For each iteration, dynamically build an image, using document.createElement(’img’), or your image object.
• At the end of each iteration, test to see if the current image is the last image in your array. If it is, assign your “all loaded” function to that image’s onload event handler. Otherwise, assign an arbitrary little callback function if you’d like.

Now, your function can learn when all images are loaded. Also, if you’d like more flexibility or interactivity, you can map each individual image’s event handler to a different function (say, update a progress bar with what image is being loaded, or show a progress percentage). All thanks to the image itself.

Currently, I’m trying to mash-up Flickr and AJAX using JSON as the transport medium. Why?, you ask. Because, JSON seems to be the way to go for Web 2.0. Far, far less overhead to get your data in a workable form. Why build and traverse the XML DOM in the browser, when JSON lets you get right into it?

Think of the cost savings in terms of time, effort, and cost on the client. With XML, you’re going to have to build a DOM, traverse the DOM, then build and operate on your object. With JSON, you get your object back with a simple eval. A very nice trick. Plus, I’m working in javascript all the time. I’m used to it, and know how to make it do tricks. Just give it back, right off the server. XML is nice, don’t get me wrong. But, when you’re operating in javascript, operate in javascript.