没有合适的资源?快使用搜索试试~ 我知道了~
js如何实现元素曝光上报
1 下载量 22 浏览量
2020-10-16
14:21:45
上传
评论
收藏 51KB PDF 举报
温馨提示
试读
3页
主要介绍了js如何实现元素曝光上报,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
资源推荐
资源详情
资源评论
js如何实现元素曝光上报如何实现元素曝光上报
主要介绍了js如何实现元素曝光上报,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参
考学习价值,需要的朋友们下面随着小编来一起学习学习吧
进行数据上报的时候,经常会遇到列表数据曝光上报的问题,只对在当前可视范围内的数据内容进行曝光上报,而对于未在可
视范围内的数据不进行曝光上报,等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报。
解决方案解决方案
目前针对此类问题,主要有两种解决方案。
方案一:监听页面或者区域方案一:监听页面或者区域scroll事件,通过事件,通过getBoundingClientRect接口取元素的位置与可视窗口进行判断。接口取元素的位置与可视窗口进行判断。
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
var width_st = rect.width / 2,
height_st = rect.height / 2;
var innerHeight = window.innerHeight,
innerWidth = window.innerWidth;
if ( rect.top <=0 && rect.height > innerHeight
|| rect.left <= 0 && rect.width > innerWidth
) {
return rect.left * rect.right <= 0
|| rect.top * rect.bottom <= 0
}
return (
rect.height > 0
&& rect.width > 0
&& ( ( rect.top >= 0 && rect.top <= innerHeight - height_st )
|| ( rect.bottom >= height_st && rect.bottom <= innerHeight ) )
&& ( ( rect.left >= 0 && rect.left <= innerWidth - width_st )
|| ( rect.right >= width_st && rect.right <= innerWidth ) )
);
}
var nodes = document.querySelectorAll(".item")
function report(node) {
// 上报的逻辑
}
window.onscroll = function() {
nodes.forEach(node => {
if( isElementInViewport(node) ) {
report(node)
}
})
}
优点:兼容性好
缺点:
需要关注页面或者区域的scroll事件
频繁的scroll事件,性能问题
方案二:通过方案二:通过 IntersectionObserver 监听元素是否处于可视范围监听元素是否处于可视范围
function report(node) {
// 上报的逻辑
}
var intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if( entry.intersectionRatio > 0 ) {
report(entry.target)
}
})
})
var nodes = document.querySelectorAll(".item")
nodes.forEach(node => {
intersectionObserver.observe(node)
资源评论
weixin_38713393
- 粉丝: 8
- 资源: 878
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功