埋点曝光

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：

• 图片懒加载——当图片滚动到可见时才进行加载
• 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
• 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
• 在用户看见某个区域时执行任务或播放动画

    function exposeHomeZpt(){
            var zptList = $('#home_zpt li')
            if(IntersectionObserver){
                var io = new IntersectionObserver((entries) =>{
                    for(var k = 0; k < entries.length;k++){
                        if(entries[k].intersectionRatio >= 0.5){
                            reportLog({
                                "resource_type":"zpt",
                                "resource_id":entries[k].target.getAttribute('data-zptid'),
                                "event_type":"display",
                                "event_extend":{
                                    "request_id": entries[k].target.getAttribute('data-requestid'),
                                     "from": "首页-推荐"
                                }
                            })
                            io.unobserve(entries[k].target)
                        }
                    }
                }, {
                    threshold: 0.5,
                })
                zptList.each(function(){
                    io.observe(this)
                })
            }
        }
        function reportLog(data){
            $.ajax({
                url: AppOrigin + "/log",
                type: 'POST',
                cache: false,
                data: JSON.stringify(data),
                        contentType: 'application/json; charset=utf-8',
                processData: false
            })
        }