本文介绍一种利用 JavaScript Image 对象进行前端埋点统计的技术方案。通过复用 Image 对象并标记其空闲状态，有效解决高频点击导致的数据上报丢失问题。代码依赖 jQuery，实现了自动获取 referrer、时间戳及自定义参数，并按指定顺序拼接 URL 进行无刷新数据提交，适用于页面元素点击或特定逻辑执行点的计数统计。
埋点统计需求与特点
该方案主要用于统计用户页面中特定区域的点击次数，或者记录程序执行到某个特定点的频率。
特点
根据实际业务场景，可以创建多个 Image 对象实例，遵循“谁空闲谁处理”的原则。这种机制旨在解决因用户操作过快、发送埋点数据过于频繁而导致部分埋点数据丢失的问题。
实现
注：以下代码实现依赖于 jQuery 库。
基于 Image 对象的代码实现
具体实现代码如下：
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('&&'));
}
};