javascript 利用Image物件實現的埋點(某處的點擊數)統計_javascript技巧

需求：統計用戶頁面某處的點擊數或執行到程式中某一點的次數
特點：根據實際情況，創建多個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;iif(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('&'));

} };