javascript 利用Image對象實現的埋點(某處的點擊數)統計
來源:互聯網
上載者:User
需求:統計使用者頁面某處的點擊數或者執行到程式中某個點的次數
特點:根據實際情況,建立多個Image對象,原則誰空閑誰做事。解決因過快發送埋點資料導致部分埋點缺失的問題。
實現:(注下面的代碼依賴jQuery)
複製代碼 代碼如下:var Statistic= {
arrImg:[],
log:function(from){
//如果參數為空白,則不處理
if(typeof(from)=="undefined" || from=="") return;
var me=this,img,imgHandler,arrImg,len=0,index=-1;
arrImg=me.arrImg;
len=arrImg.length;
//查詢可用的Image對象
for(var i=0;i<len;i++){
if(arrImg[i].f==0){
index=i;
break;
}
}
//取出或者產生Image對象
if(index==-1){
img=$(new Image());
arrImg.push({f:1,img:img});
index=(len==0?0:len);
}else{
img=arrImg[index].img;
}
//標記Image對象為正在使用狀態
arrImg[index].f=1;
//記錄所使用的Image對象的位置
img.data("vid",index);
imgHandler = function(){
var vid=$(this).data("vid");
if(vid>=0){
arrImg[vid].f=0;
}
};
img.unbind().load(imgHandler).error(imgHandler);
var arr = [],ref,url="http://z.ccccccc.com/beacon.gif?";
ref = document.referrer;
if (ref) {
ref=encodeURIComponent(ref);
}else{
ref='';
}
//必須嚴格按照以下的先後順序:t,r,from,version
arr.push('t='+ (new Date()).getTime());
arr.push('r='+ref);
$(img).attr("src",url+ arr.join('&'));
}
};