利用IntersectionObserver页面自动曝光上报

IntersectionObserver——交叉观察器，可以结合其特性做页面自动曝光上报。

基础介绍，MDN，阮一峰

代码如下：

添加了jsAutoReport的className，会进行交叉观察，添加了jsReportOnceclassName的不会进行重复上报，只会上报一次。

<!-- html -->
<section>
	<p>多个图片auto report</p>
	<img class="jsAutoReport" data-info="bookid001" src="https://bookcover.yuewen.com/qdbimg/349573/1031940621/180" alt="book1">
	<img class="jsAutoReport" data-info="bookid002" src="https://bookcover.yuewen.com/qdbimg/349573/1029006481/180" alt="book2">
	<img class="jsAutoReport jsReportOnce" data-info="bookid003" src="https://bookcover.yuewen.com/qdbimg/349573/1027339371/180" alt="book3">
	<img class="jsAutoReport" data-info="bookid004" src="https://bookcover.yuewen.com/qdbimg/349573/1030870265/180" alt="book4">
</section>
<script src="https://qidian.gtimg.com/yuewen/v1/js/zepto.min.js"></script>

/* css */
body,section,img,p {
    margin: auto;
    padding: 0;
}
p {
    text-align: center;
}
img {
    display: block;
    margin: 6px auto;
}

// js
const rootReportIntersectionObserver = function(){
    let that = this;
    that.observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry,index) {
            // isIntersecting为假，说明不在显示区域
            if(!entry.isIntersecting){
                return
            }
            var $target = $(entry.target);
            console.log('曝光一次', $target.data('info'));
            //曝光只曝光一次
            if($target.hasClass('jsReportOnce')){
                that.observer.unobserve($target.get(0));
                $target.removeClass('jsAutoReport')
            }
        })
    },{
        root: null,
        rootMargin: '0px',
        threshold: 0.25 // target 元素和 root 元素相交程度>=该值的时候 IntersectionObserver 的回调函数将会被执行，可为数组
    });
    that.updateObserver = function(){
        $('.jsAutoReport').each(function (e){
            that.observer.observe(this);
        })
    }
    that.updateObserver();
}
rootReportIntersectionObserver();

效果如下所示