0

I'm working on a tracking function using the 1x1 pixel image trick, partially based on http://www.ebrueggeman.com/blog/redis-visitor-tracking.

My track.php looks like:

$out = date("Y-m-d H:i:s \n"); //later will pull and log data from $_SERVER
file_put_contents('log.txt', $out  , FILE_APPEND );
//output appropiate headers and serve pixel
$pixel = '1x1.gif';
header('Content-Length: ' . filesize($pixel));
header('Content-Type: image/gif');
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
print file_get_contents($pixel);
sleep(10); //<== for testing, to simulate possible extra processing or bottlenecks. Should NOT delay loading of main page

I've tried several ways of loading the image/script asynchronously:

//Option 1
//http://www.ebrueggeman.com/blog/redis-visitor-tracking
(function() { //console.log('s');
    var pxl = document.createElement('img');    
    pxl.async = true;
    pxl.src = 'track.php';
    pxl.width = 1;
    pxl.height = 1;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(pxl, s);
})();

//Option 2
var img = $("<img />").attr('src', 'track.php')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#here").append(img);
        }
    });

//Option 3
//https://github.com/sebarmeli/JAIL (Jquery Asynchronous Image Loader)
$(function(){
   $('img.lazy').jail();
  });

//Option4
$.ajax({
  url: "track.php",
  cache: false
});

When testing options 1 and 2, the browser keeps 'waiting' until the delay in track.php is completed. Should it do that? I tried both FF and Chrome and they keep turning, showing the page hasn't completely loaded yet.

On options 3 and 4 the page shows Ready immediately, but the code gets heavier by using external scripts and plugins.

What would be the best way of loading this script and giving the least possible delay and added processing to the page being tracked?

Thanks for any insight.

UPDATE:

I uploaded the test to a commercial hosting account, and it behaves as expected. Even when my local test was going through apache, for some reason the test behaved different when going through localhost. Thanks all for your input.

Henry
  • 1,374
  • 2
  • 14
  • 24
  • If you run your option 2 only when the DOM is ready, then it will work. –  Nov 30 '12 at 19:01
  • Sergio: I tried surrounding option 2 with `$(function() { });` and `$(document).ready(function()` and it keeps delaying the page loading. Thanks for your help. – Henry Nov 30 '12 at 19:14
  • 1
    Ops, my bad. The DOM is ready before the page completely loads. For this you need to use `$(document).load`, see more [here](http://stackoverflow.com/questions/5346200/jquery-if-page-loaded). –  Nov 30 '12 at 19:21
  • 1
    Nothing obviously wrong with options 1 and 2. Try a variant of option 2: `$("").attr('src', 'track.php').on('load', function() {...}).on('error', function() {...});` with alerts to see whether load or error occurs. – Beetroot-Beetroot Nov 30 '12 at 20:05
  • I've tried `$(window).load` and Beetroot's suggestion and both keep the browser cursor turning until the delay is finished. The script is inside ``. I'm testing the script on `localhost` (ubuntu). Not sure what else to try... – Henry Nov 30 '12 at 20:28

1 Answers1

1

You can really just use an 'Image()' object for this.

Example with jQuery

$(window).load(function(){
    var img = new Image();
    img.src = "track.php";
});

Example using standard DOM

window.addEventListener("load", function(){
    var img = new Image();
    img.src = "track.php";
}, false);

You should probably append a random GET parameter onto the request to ensure that it doesn't ever get cached like this:

window.addEventListener("load", function(){
    var img = new Image();
    img.src = "track.php?" + Math.floor(Math.random() * 9e9);
}, false);
pseudosavant
  • 7,056
  • 2
  • 36
  • 41