简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

javascript 利用Image对象实现的埋点(某处的点击数)统计_javascript技巧

WBOY
Release： 2016-05-16 17:44:59
Original
1855 people have browsed it
需求：统计用户页面某处的点击数或者执行到程序中某个点的次数
特点：根据实际情况，创建多个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('&'));
}
};
Related labels：
Image对象 埋点统计
source：php.cn
Previous article：载入jQuery库的最佳方法详细说明及实现代码_jquery Next article：Javascript 加载和执行-性能提高篇_javascript技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Validate fields of objects in form - Vue 3 + Vee-validate + yes I have a form where some fields are inside an object: <scriptsetuplang="ts"&g...
From 2023-11-16 13:56:09
0
1
169
Laravel script tries to call method on incomplete object I just upgraded from v8 to Laravel9 and suddenly started getting this error, Error:Thescri...
From 2023-11-12 23:40:29
0
1
269
How to use open primitive tag in next js 13? In the recent NextJS13 update, they introduced a new way of handling meta tags that differ...
From 2023-11-10 23:03:51
0
1
527
How to conditionally destructure an object property from a Pinia getter? 我有以下商店：exportconstuseMyStore=defineStore('myStore',{state:()=>{return{openTransOnly:fal...
From 2023-11-08 17:47:18
0
1
275
Vue 3 Composition API - Potentially empty object I'm using Vue3Compositionapi and Typescript to implement pinch-to-zoom using the HammerJS ...
From 2023-11-08 13:04:14
0
1
166
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！