BlogMatrix
 

Internet Explorer and dynamically changing img.src

edit David P. Janes 2006-10-15 07:30 UTC 7 comments  ·

We slipped a photo album extension into the product on Friday; you can see one right here. Unfortunately, it doesn't always work on Internet Explorer -- the image sometimes displays as blank.

The explaination is here:

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.

We went with the setTimeout method, obviously:

onclick : function(index, again) {
    if (document.all && !again) {
        window.setTimeout("i$(ID).onclick(" + index + ", 1)", 1)
    }

Comment #1dawolf

2006-12-01 15:25:13

I got this working in IE with the following trick:

dont just call the JS function onclick, but also return false right after the function call:

onclick="toggleimage(); return false;"

Comment #2Corey

2007-03-10 03:03:44

dawolf's solution works! I freaking love you dawolf!!!

Comment #3Inso

2007-06-04 08:13:30

dawofl, you ARE THE BEST!!!!!!!!!!!!!!!!!!!!

I wish I found your comment 5 HOURS EARLIER!!!! ha ha, you made my day!

THanks, dude!

Comment #4tronic

2007-07-12 22:19:39

yeah, thanks dawofl. you've saved me loads of time there. easy when you know..

Comment #5Madat

2008-01-23 08:39:21

Thanks dawolf

just wth return false idea you have solved a problem that i couldnt solve for last two days.

Comment #6libh

2008-02-05 23:36:36

I've been searching for a solution to this IE image switching problem for a long time - thank you very much!

Comment #7brent

2008-03-19 22:22:39

Thanks dawolf!  I would never have thought to return false in the event to fix this problem with IE6.

Add Comment