Issue with js asynchronous image loading

Question

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.

If you run your option 2 only when the DOM is ready, then it will work. — user800014
– user800014, Commented Nov 30, 2012 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
– Henry, Commented Nov 30, 2012 at 19:14
Ops, my bad. The DOM is ready before the page completely loads. For this you need to use $(document).load, see more here. — user800014
– user800014, Commented Nov 30, 2012 at 19:21
Nothing obviously wrong with options 1 and 2. Try a variant of option 2: $("<img />").attr('src', 'track.php').on('load', function() {...}).on('error', function() {...}); with alerts to see whether load or error occurs. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Nov 30, 2012 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 <head>. I'm testing the script on localhost (ubuntu). Not sure what else to try... — Henry
– Henry, Commented Nov 30, 2012 at 20:28

pseudosavant · Accepted Answer · 2012-11-30 23:16:22Z

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

answered Nov 30, 2012 at 23:16

pseudosavant

7,3042 gold badges41 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with js asynchronous image loading

1 Answer 1

Example with jQuery

Example using standard DOM

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Example with jQuery

Example using standard DOM

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related