Ensuring image retrieval during onClick events

IE fails to execute new Image source request prior to following link

[mad_gerry]

Hi all,

I am running into a problem where IE follows the HREF link before the onClick code has completed. More specifically I am superimposing onclick behaviour onto an existing onclick function (via the DOM). So far so good. But the existing function dynamically requests an Image (for counting purposes) and this is not fired off before Internet Explorer follows the HREF link (FireFox is fine).

function count(a,b){
(new Image()).src="http://www.myserver.com/count.pl?a="+a+"&b="+b;
}
<a href="mydestination.html" onclick="count(56,23)">Click here.</a>

When I wrap my additional onClick code around it I know that the original code gets executed but the Image never gets requested. It does if I throw in an alert..

Does anybody have any ideas. I know something similar was discussed under [webmasterworld.com...] but this is not viable for me.

Thanks.

[mad_gerry]

Interestingly enough. On a whim I placed an empty image tag in the code. Using this object as my image object then requested the image ok. Looks like the problem might be with nested placements of images..

function count(a,b){
(document.getElementById("empty")).src="http://www.myserver.com/count.pl?a="+a+"&b="+b;
}
<a href="mydestination.html" onclick="count(56,23)">Click here.</a>
<img id="empty" src="">

If anybody can think of a way to not have to do this that would be great..

[Fotiman]

function count(a,b){
(new Image()).src="http://www.myserver.com/count.pl?a="+a+"&b="+b;
}
<a href="mydestination.html" onclick="count(56,23)">Click here.</a>

You're creating the new image, but you're not doing anything with it. That is, you've not assigned it to anything on your page, so how could it possibly be shown?

EDIT:
Ok, I get it now after taking a closer look at what you're doing.
Perhaps try creating a new DOM img node instead. Maybe something like this:

function count(a,b){
var n = document.createElement("img");
n.src = "http://www.example.com/count.pl?a="+a+"&b="+b;
}

If that doesn't work, then take it another step further... give the new node a style="display:none" and then attach the node to document.body.

[edited by: Fotiman at 7:18 pm (utc) on Jan. 5, 2007]