Change img-src for IE

January 31, 2007 at 12:03 pm by Wolfram · Filed under AJAX (style) guide, Dojo, JavaScript, Programming

It’s impossible, how much additional work the most used browser is putting on a web dev. I think during the last four weeks I have been wasting at least 30% of my time searching for workarounds for IE. This is really becoming a drag.
One simple thing I was searching for today, was how to replace an image’s src attribute with a new value, a new image so to say. I implemented he most obvious way, of course.


var img = dojo.byId("“);
img.src = “/new/img.jpg”;

This doesn’t work in IE :-(. Some pages had some tips on workarounds, but they are all quite ugly or not feasible in my case. So I took the next obvious turn and replaced the image like so.


var img = dojo.byId("“);
var newimg = new Image();
img.src = “/new/img.jpg”;
dojo.dom.replaceNode(img, newimg);

In this example I am using dojo to do the DOM work, you can do this by hand of course too.
The only tiny problem left, is that it flickers a little bit in IE, when the image changes. But currently that is not bothering me. But if you got a simple solution let me know. (I know you could overlay the new image, replace the old one remove the overlayed, and so on, but currently that does not seem worth the effort for me.)

9 Comments »

  1. iberck said,

    June 19, 2008 at 1:23 am

    Hi, if you load the image in a global variable the flickers dissapears

  2. Wolfram said,

    June 20, 2008 at 12:57 am

    Thank you!

  3. SimonBoris said,

    September 6, 2008 at 1:54 am

    Hi everybody.

    I had the same problem when changing src attribute using IE6.
    And i have solved my problem and wanted to share this with all of you.

    I was doing a for loop to change of bunch of thumbnail images like the following:

    function changeThumbs(){
    …
    for(var i=0;i<a.length;i++){
    …
    img.src=a[i].url;
    …
    }
    }

    The images where disapering in ie6.
    The code is good, the reason there was a render bug was that the function was called via an event (onclick) on a link tag (<a href=”" onclick=”changeThumbs()”… )

    Once the action place on another tag (li in my case), no more bug.

    I cant explain why the A tag (<a href…) was causing this bug on ie6, but once remove, it was working great.

    Hope it will help some people.

  4. litcat said,

    September 3, 2009 at 5:15 am

    Thanks you sosososo much, SimonBoris.

  5. Madison Brown said,

    May 9, 2010 at 12:44 pm

    Flicker is really great when sharing photos over friends and families. I love the resize feature of Flickr.~”.

  6. Denis said,

    September 30, 2010 at 11:17 pm

    I had some problems like that but I solved it by adding the “name” property on my img tag, and not only the id property. (Right now I can’t simulate the error again…. :( )
    But this code is working ok for me, both in Firefox 3.6 and IE 8

    Insert title here

    function change_image(){
    document.img.src = ‘imagem2.jpg’;
    }

  7. kumar said,

    October 21, 2011 at 2:06 pm

    some trans img will also works but   will make the same issue

  8. kumar said,

    October 21, 2011 at 2:08 pm

    <!– some trans img will also works but   –!> will make the same issue

  9. kumar said,

    October 21, 2011 at 2:11 pm

    Sorry guys, i tried to say you have to form your a tag (which trigger onclick event) with some content or trans image, if your a tag is empty your function will not replace the src of the image tag

RSS feed for comments on this post · TrackBack URL

Leave a Comment