JavaScript:一段时间后更改 Div 背景

Question

我的网站上有一个广告部分。对于大多数用户来说，这加载得很好并且按预期工作。但是，如果用户有某种广告拦截器，则广告不会显示，并且会显示网站的空白区域。

我的解决方案？我想在广告下方放置一张背景图片，要求用户考虑仅在该网站上启用广告。此图像不显眼，让用户可以选择是否支持他们正在访问的站点。通过简单的 CSS，我可以很好地完成这项工作(只需使用 background-image 就可以了)。

问题是广告需要一点时间来加载(对于某些用户来说大约需要一秒左右)。我不希望在广告有机会加载之前显示此背景图像，因此我想在一定时间(可能是 2-3 秒)后更改 div 的背景。

这是我目前对 JavaScript 函数的尝试:

<script type="text/javascript">
function show_banner(){
    document.getElementById('banner').style.background="url('images/banner_bg.png')";
}
function show_banner_delay(){
    setTimeout("show_banner()", 3000);
}</script>

这是 HTML 代码:

<div id="banner-wrap">
    <div id="banner">
        <!--Google AdSense Code Here-->
    </div>
</div>

我觉得我可能只是在这里遗漏了一些基本语法，但我似乎无法弄明白!

感谢您的帮助!!!

Answer 1

删除 show_banner_delay 函数。测试一下:

function show_banner(){
    document.getElementById('banner').style.backgroundImage="url('images/banner_bg.png')";
}

window.onload = function() {
   setTimeout(show_banner, 3000);
};