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

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

如果网络不够流畅，广告还没显示就可能会让网站访客先看到这张背景图。因此现在有一个新的需求就是希望这张背景图片可以稍微延迟点显示，给广告的显示预留更多的时间。也就是尽量让访客在显示广告前不会看到这张背景图。

之前本站黑鸟博客使用过 gif 图片的方案，把想让访客看到的图片放在最后播放，在其之前播放其他预设的画面。但是这种方式并不够灵活。因此有了接下来的折腾。

以下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>

由于是给别站准备的，这次就不提供效果演示示例了。