Can’t change <img> src attribute reliably in IE

I googled the web, and searched here in @ webdeveloper, but I can’t find anything relevant. Perhaps someone can shed some light on this insanity. I’m a Java developer, and have considerably less experience with Javascript, so may be missing some well known quirk.

[b]Problem[/b]
The issue is that changing the ‘src’ attribute of an <image> tag, is making the image disappear, rather than change. Frustratingly, the problem only happens in IE; Gecko behaves as expected.

I have found two work arounds: one is to pop up an alert just after chainging ‘src’: the icon image correctly updates when the alert dialog is popped up (before dismissing it). The second is to use a callback with the ‘setTimeout’ method. The first is unacceptable, the second is, IMHO, simply ugly.

My best theory is that the thread which changes the ‘src’ value is the same one to update the UI, and it is dying before actually getting to update the view. I assuming that ‘setTimeout’s callback is invoked by a separate thread, which doesn’t die prematurely. The ‘alert’ workaround suggests a pause to let the UI update complete.

I’m hoping someone can point me in the right direction to do this cleanly, or simply point out that yes, this is (yet another) known bug in IE, or give me some more debugging hints — since I’m fresh out.

[B]Situation[/B]
The page I’m working on is going to have an expanding menu tree (much like a file system browser). I used the free ‘[URL=http://www.softcomplex.com/products/tigra_menu_tree/]Tigra Menu Tree[/URL]‘ for the menu. I’ve made some changes to customize it, and fix a bug, but what I use is pretty much what’s up there. I found a couple bugs in it, and was last updated in ’02, so the problem may or may not be there. It does seem to work on other pages though.

The menu items are represented as ‘TreeItem’ objects and display as a small image and some text, wrapped in an anchor tag, with an ‘onclick’ handler. ‘onclick’ invokes the ‘select’ method below:

[CODE]TreeItem.prototype.select = function (b_deselect) {
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;
this.o_root.o_selected = this;
if (o_olditem) o_olditem.select(true);
}
var o_iicon = document.images[‘i_img’ + this.o_root.n_id + ‘_’ + this.n_id];
if (o_iicon) {
var item=this;
//setTimeout(function() { //workaround 2
o_iicon.src = item.get_icon();
//}, 0); //workaround 2
}

e(‘i_txt’ + this.o_root.n_id + ‘_’ + this.n_id).style.fontWeight = b_deselect ? ‘normal’ : ‘bold’;

this.upstatus();
//alert(“returning”);// workaround 1
return new Boolean(this.a_config[1]);
}
…
e=(document.all ? function(id){return document.all[id]} :
function(id){return document.getElementById(id)});[/CODE]

The return value is true if the menu item references a URL, false if not (this was the bug I fixed: I added the ‘new’, as IE didn’t like not having it; mentioned later). The “upstatus” method modifies the text in the statusbar.

Clicking the TreeItem link will (in IE) make the item’s icon dissappear, unless one of either the alert (workaround 1), or the setting of the timeout callback (workaround 2) is uncommented.

[B]The Trial (what I recall of it):[/b]
Earlier in the debugging process I wrapped the method code in a try/catch block and found that IE wanted the return to be “new Boolean…” not just “Boolean”, but that didn’t fix the image dissappearing. With that issue fixed, there are no exceptions being thrown from inside the method.

Another problem I had with the menu script was getting the “one item remaining” status in IE, and the tree never being built. I was able to get around that by preloading the images and only building the tree via callback when the images had all finished loading.

The ‘get_icon’ method [i]was[/i] simply building a string. I changed that to actually look up the preloaded Image object, and return it’s src value thinking that accessing the preloaded Image might help, but it didn’t.

I tried setting the ‘src’ attribute multiple times in succession, but that didn’t help.

I tried replacing the ‘alert’ with a busy loop which checks a new Date, to wait up to a minute, but that didn’t help.

I thought maybe there are too many items in the DOM for it to have time to refresh, but stripping out most of the HTML and cutting the menu to 2 items didn’t help.

Note that even though setting ‘src’ failed, the text of the item was bolded, so I know further code is executing.

Around here is when I came up with the ‘thread dying abruptly’ theory.

I’m guessing something is throwing an exception [i]after[/i] I’m setting the src attribute, so I tried adding a try/catch directly in the onclick, wrapping the call to ‘select’, but that didn’t help. It seems no exception is being thrown.

I’ve also tried using Microsofts Script Debugger. It locks up both itself and IE within moments of trying to execute the onclick callback. I don’t have MS Visual Studio (or whatever the latest supported debugging environment for js in IE is).

Is there a better way to find out what happens [i]after[/i] the method exits?

I tried to cut it down to a bare minium example of html and js, but so far I haven’t been able to build up a page from scratch that reproduces this.

[B]Environment[/B]
My env is WinXP SP2, IE 6, running Apache locally for testing, so network latency isn’t really an issue (though having to preload images was surprising).

If you’ve made it here, thanks, and apologies for the length. I did find the timeout workaround while writing, so there’s been benifit, even if the problem never ‘solved’! ?

Also in #JavaScript _↴