javascript 利用Image對象實現(xiàn)的埋點(某處的點擊數(shù))統(tǒng)計
更新時間：2012年12月28日 10:26:00 作者：
統(tǒng)計用戶頁面某處的點擊數(shù)或者執(zhí)行到程序中某個點的次數(shù);根據(jù)實際情況，創(chuàng)建多個Image對象，原則誰空閑誰做事，解下來詳細介紹，需要了解的朋友可以參考下
需求：統(tǒng)計用戶頁面某處的點擊數(shù)或者執(zhí)行到程序中某個點的次數(shù)
特點：根據(jù)實際情況，創(chuàng)建多個Image對象，原則誰空閑誰做事。解決因過快發(fā)送埋點數(shù)據(jù)導致部分埋點缺失的問題。
實現(xiàn)：（注下面的代碼依賴jQuery）
var Statistic= {
arrImg:[],
log:function(from){
//如果參數(shù)為空，則不處理
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對象為正在使用狀態(tài)
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('&'));
}
};
特點：根據(jù)實際情況，創(chuàng)建多個Image對象，原則誰空閑誰做事。解決因過快發(fā)送埋點數(shù)據(jù)導致部分埋點缺失的問題。
實現(xiàn)：（注下面的代碼依賴jQuery）
復制代碼 代碼如下:
var Statistic= {
arrImg:[],
log:function(from){
//如果參數(shù)為空，則不處理
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對象為正在使用狀態(tài)
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('&'));
}
};
相關(guān)文章
JavaScript中使用sencha gridpanel 編輯單元格、改變單元格顏色
ExtJS中的表格功能非常強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能，通過本篇文章給大家介紹JavaScript中使用sencha gridpanel 編輯單元、改變單元格顏色，感興趣的朋友一起學習2015-11-11
本文主要對小程序的優(yōu)缺點和DeviceOne的特點進行介紹，分享了使用DeviceOne實現(xiàn)微信小程序功能的實例代碼，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了JS實現(xiàn)仿雅虎首頁快捷登錄入口及導航模塊效果,涉及JavaScript響應鼠標事件遍歷頁面元素的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了淺談JS中this在各個場景下的指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了JS模仿騰訊圖片站的圖片翻頁按鈕效果,涉及javascript動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js關(guān)于命名空間的函數(shù),實例講述了namespace函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
layer關(guān)閉彈出窗口觸發(fā)表單提交問題的處理方法
今天小編就為大家分享一篇layer關(guān)閉彈出窗口觸發(fā)表單提交問題的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
由于前端開發(fā)的火熱和一些IT巨頭公司 對 web前端開發(fā)人員的需求旺盛，讓越來越多的人轉(zhuǎn)入前端。今天就為大家分享了一份Web前端開發(fā)書單，希望大家喜歡2017-10-10
本篇文章主要介紹了Javascript實現(xiàn)頁面滾動時導航智能定位，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要給大家介紹了關(guān)于微信小程序請求前置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03