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

Question

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 implementation 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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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);