0

我正在使用 1x1 像素图像技巧开发跟踪功能，部分基于http://www.ebrueggeman.com/blog/redis-visitor-tracking。

我的track.php样子：

$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

我尝试了几种异步加载图像/脚本的方法：

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

在测试选项 1 和 2 时，浏览器会一直“等待”直到延迟track.php完成。它应该这样做吗？我尝试了 FF 和 Chrome，它们一直在转动，显示页面尚未完全加载。

在选项 3 和 4 上，页面会立即显示 Ready，但由于使用外部脚本和插件，代码会变得更重。

加载此脚本并尽可能减少延迟并为被跟踪页面添加处理的最佳方式是什么？

感谢您的任何见解。

更新：

我将测试上传到商业托管帐户，它的行为符合预期。即使我的本地测试通过 apache，由于某种原因，通过 localhost 时测试的行为也有所不同。感谢大家的意见。

4

1 回答 1

1

您实际上可以为此使用“Image()”对象。

使用 jQuery 的示例

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

使用标准 DOM 的示例

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

您可能应该在请求上附加一个随机 GET 参数，以确保它不会像这样被缓存：

window.addEventListener("load", function(){
    var img = new Image();
    img.src = "track.php?" + Math.floor(Math.random() * 9e9);
}, false);
于 2012-11-30T23:16:22.897 回答