0

http://www.ebrueggeman.com/blog/redis-visitor-trackingに部分的に基づいて、1x1 ピクセル画像トリックを使用して追跡機能に取り組んでいます。

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

track.phpオプション 1 と 2 をテストすると、ブラウザは遅延が完了するまで「待機」し続けます。そうすべきですか？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 に答える