冰豆网

分享网络精彩
bingdou.com.cn

反广告屏蔽/显示提示图片的优化方案

时间:2021-03-14加入收藏

在网站广告被屏蔽的时候可以在原来的位置显示一张图片来弥补损失。其原理主要是使用一个div标签把广告代码包裹起来,并设置background背景图片,如下示例:

<div class="adstest" style="height:200px;background:#ffffff url(https://tva1.sinaimg.cn/large/6a269efcly1gl65bgcc4gj208b05kdfo.jpg) no-repeat;">
<!-- 广告代码 -->
</div>

如果网络不够流畅,广告还没显示就可能会让网站访客先看到这张背景图。因此现在有一个新的需求就是希望这张背景图片可以稍微延迟点显示,给广告的显示预留更多的时间。也就是尽量让访客在显示广告前不会看到这张背景图。
以下JavaScript函数代码,主要功能是结合监听器和 window.onload 实现页面加载完处理多个函数。

function addLoadListener(fn){
    if (typeof window.addEventListener != 'undefined'){
        window.addEventListener('load',fn,false);
    }else if(typeof document.addEventListener != 'undefined'){
        document.addEventListener('load',fn,false);
    }else if (typeof window.attachEvent != 'undefined'){
        window.attachEvent('onload',fn);
    }else{
        var oldfn = window.onload;
        if(typeof window.onload != 'function'){
            window.onload = fn;
        }else{
            window.onload = function(){
                oldfn();
                fn();
            };
        }
    }
}

这个函数的使用方法也比较简单,把它放在 JavaScript 的最顶部,然后在下面编写功能函数,如果需要将某个功能函数使用这种方法加载,就可以把函数名作为参数调用这个自定义的 addLoadListener 。代码如下:

addLoadListener(func);
function func() {...}

这样,就实现了页面加载完成之后处理多个函数了。

接下来我们只要使用div包裹广告代码并设置一个id属性

<div id="adstests">
<!-- 广告代码 -->
</div>

然后使用jQuery来动态设置背景图即可。

<script>
 
... 省略代码 ...
 
function func() {
    $("#adstests").attr("style","min-height:200px;background:#ffffff url(https://tva1.sinaimg.cn/large/6a269efcly1gl65bgcc4gj208b05kdfo.jpg) no-repeat;");
}
</script>

打 赏
打赏二维码

TGA: 技巧

分享到:


官方微信二维码冰豆网官方微信公众号