I want to implement fire-and-forget request for in img src in JavaScript

I'm trying to implement fire-and-forget on an img src=... call from a web page, and am looking for the most solid method. Why?

In most Web tracking systems like Omniture or Coremetrics, there is a request for an img src which also happens to carry all the data for the tracking system to record. Like any other image request, the page tries to wait for the response, potentially slowing down the page-load.

What I'm trying to do is implement a tracking system where webpage response time is a much higher priority than whether the request was actually successful, and therefore waiting for the response is totally unnecessary under all conditions, which include...

1. The server received the request, and can readily respond (HTTP response code 200)
2. The server received the request, but is bogged down and can still readily respond with an error 500 response code
3. The server is not running at all
4. The server was not found due to DNS glitches
5. The request hit the server, but is so bogged down that it's taking noticeable time to respond.

I have already investigated using the XMLHttpResponse object and an asynchronous request that can quietly fail, but you quickly run into the same origin policy and browser compatibility code bloat. I believe a plain jane img request is still the best request mechanism, but am trying to work out the best fire-and-forget impleme开发者_运维问答ntation with the smallest amount of code. So far, I know I can...

onerror="this.parentNode.removeChild(this)" onload="this.parentNode.removeChild(this)"

This works pretty well on scenarios 1 through 4 where there is a finite and predictable conclusion to the request. It breaks down in scenario 5, which could be avoided if there were something in-between.

I'm toying with the idea of seeing if this.src.readyState == "complete" but see that I am heading down a road of browser compatiblity and race-condition hell were it would be wise to tap the StackOverflow community first.

Anyone have experience with this and a good solution?

Why not just add the img tag to your document after it loads?

You need it to be loaded asynchronously. Google do one, if you want something a bit more heavyweight, eVisitAnalyst do a similar thing.

The brucey bonus of having it done asynchronously is that if the .js is unobtainable your page doesn't need to wait for it.

My PoV: User experience comes first, tracking comes next. I have used WebTrends/Omniture & Coremetrics and yes they do give very fine grained details (and later you can segment it the way you want) about the request. Even without these web analytics vendors implemented, you can get a lot of information from your server logs, you just have to do the segmentation yourself (you can log IPs-depending on your Terms & Conditions- and Omniture/Coremetrics do it anyways,Pages requested,action performed like checkout,add to cart, etc).Though these web analytics vendors are very aware of performance and they just send you 1x1 pixel as a response, if their server were slow, your user experience is bad (sometimes happens with google urchins for me, I wait for this one image to load for a very long time). I would think the best way to implement this would be after the document has loaded (jQuery - Document.ready ? ) and then append the <img src="vendor url"/>to the html dom.Even if the request fails or takes a long time, now the user does not feel that the site is unusable

As the other answer suggests, you could simply add the img tag to the image after the document loads.

This brings about two subproblems: 1) how do you know when the document is loaded and 2) how to add the img tag. I suggest using the $(document).ready() from JQuery for 1) and some DOM manipulation for 2) (also with JQuery).

There are methods of detecting when the document is completely loaded and inserting a tag, but using a framework (alternatives other than JQuery should be OK, I'm just suggesting something I know works) saves you some effort, especially when it comes to making things work on multiple browsers.

EDIT: typo

You can POST with a form that target an iframe(same or different domain is ok).

And after you make the call, you can remove the iframe or reuse it.

Here is an example:

<form target="targetIfr" action="http://domain.com/" method="post">
    <input name="data" type="text" value="hello" />
</form>
<iframe name="targetIfr"></iframe>

You can call it like:

frm.submit();
ifr.parentNode.removeChild(ifr);

This is an old question, but it starts off with misinformation and I didn't see anyone correct that. CoreMetrics and Adobe and many others do not use image requests that load on the dom, that can block the page, they use JS image objects, like, outImage = new Image(); That doesn't get attached to the DOM and doesn't block in the same way as an image tag would. The 1x1 pixel reponse is just to match up with the MIME type btw.

Any JS that is loaded to implement tags has far more impact.