Question

我正在使用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时表现不同。感谢大家的投入。

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

js异步图像加载问题

1 个答案:

jQuery的示例

使用标准DOM的示例