图片展示到网页可见区域，用于图片统计展示量

程序员文章站 2022-05-24 18:13:45

...

图片展示到网页可见区域，用于图片统计展示量

图片展示到网页可见区域，用于图片统计展示量

背景

参考

效果图展示
开发步骤

1：基本思路
2：上代码
结束：

图片展示到网页可见区域，用于图片统计展示量

背景

页面中要嵌入广告图片，用于展示客户广告，并且统计该图片的：展示量，点击量。
本打算用load方法，或者img的complete的属性，但是不符合要求：load在页面打开时，就已经执行，如果网页是超出一屏的，且广告图还未显示到用户的界面，这时load会执行，但是广告图片其实还没有暴露出来，这不能算展示量。而complete，似乎兼容性有问题。百度了半天，没找到想要的东西，算了，自己手写判断吧。整理一下，供参考：

参考

1：使用了Jquery，其他的原生js即可。

效果图展示

图片展示到网页可见区域，用于图片统计展示量
图中，红圈为需要曝光的广告图。该图片出现在，可见区域，才算有效展示，可统计为展示数+1。

开发步骤

1：基本思路

1：采取通过获得图片的位置，及当前可见区域的高度，判断图片是否出现在当前的可见区域。
几个基本概念：
var imgTop;//图片位于网页的高度
var imgHeight=0;//图片高度
var windowHeight=0;//屏幕高度
var scrollTop=0;//滚动后，浏览器上边的高度
图片展示到网页可见区域，用于图片统计展示量

2：上代码

1：引入相关js

//引入js-juqery
<script src="<%=path%>/js/jquery-1.9.0.min.js"></script><!-- jQuery -->

2：页面布局html

<body>
	 <div style="border:1px solid red; ">
	 	<img id="main_img_id_1" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_2" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_3" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_4" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_5" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_6" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_7" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_8" alt="" src="<%=path%>/img/carousel1.png">
	 </div>


	<!-- 广告图片-->
	 <div style="border:1px solid blue;" id="img_div_id">
	 	<p>准备展示图片</p>
	 	<img id="main_img_id" alt="" src="<%=path%>/img/carousel2.png"><!-- 显示图片 -->
	 </div>
	 
	 <div style="border:1px solid red; ">
	 	<img id="main_img_id_1" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_2" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_3" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_4" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_5" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_6" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_7" alt="" src="<%=path%>/img/carousel1.png">
	 	<img id="main_img_id_8" alt="" src="<%=path%>/img/carousel1.png">
	 </div>
</body>

3：js方法

<script type="text/javascript">

var imgTop;//图片位于网页的高度
var imgHeight=0;//图片高度
var windowHeight=0;//屏幕高度
var scrollTop=0;//滚动后，浏览器上边的高度 
var displayTag=0;//是否显示过，页面未刷新，显示最多为1，不可累加

$(function(){
	$("#main_img_id").load(function(){
	 	var position=this.position();
	 	var left=position.left;
	 	var top=position.top;
	 	imgTop=top;
	 	imgHeight=this.height;
	 	windowHeight=$(window).height();
	 	console.log("img div:[left:"+left+",top:"+top+"],imgHeight:="+imgHeight);
	 	checkImgIsDisplay('init');//如果广告图片在页首位置，不需要滚屏就能展示，则这里触发展示+1.
	});
	
	//click事件，用于统计点击
	$("#main_img_id").click(function(){
	 	alert("img click... ...");
	 	//do something
	});	
	//监听滚动事件
	$(window).scroll(function(){
		scrollTop = $(this).scrollTop();	
		console.log("scrollTop:="+scrollTop);
		console.log("windowHeight:="+windowHeight);
		console.log("imgTop:="+imgTop);
		console.log("imgHeight:="+imgHeight);	
		checkImgIsDisplay('scroll');
	});
});

/**
 判断图片是否已经展示到当前显示的区域：
 滚动条的高度+windows的高度>=图片的top+图片的高度
 && 滚动条的高度<图片的top+图片的高度
 即当前屏幕已经覆盖图片的位置
 (scrollTop+windowHeight>=imgTop+imgHeight)&&(scrollTop<imgTop+imgHeight)
 */
 function checkImgIsDisplay(tag){
	if( (scrollTop+windowHeight>=imgTop+imgHeight)&&(scrollTop<imgTop+imgHeight)){
		alert('img dispaly!['+tag+']');
		if(displayTag==0){
			displayTag=1;
			console.log('显示=1');
			//do something
		}
	}
 }
</script>