Question

I have an advertisement section on my website. For most users, this loads just fine and works as intended. However, if the user has an ad-blocker of sorts, the advertisement doesn’t show up and an empty area of the site is displayed.

My solution? I would like to place a background image under the advertisement that asks users to consider enabling advertisements on this site only. This image is un-obtrusive, and gives the user a choice whether or not to support the site they are visiting. Through simple CSS, I can make this work just fine (just use background-image and it’s good).

The problem is that advertisements take a little bit to load (about a second or so for some users). I don’t want this background-image to be displayed BEFORE the advertisement has a chance to load, so I’d like to change the background of the div after a certain amount of time (2-3 seconds, maybe).

Here’s my current attempt at a JavaScript function:

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

This is the HTML code:

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

I feel like I am probably just missing something as far as basic syntax here, but I can’t seem to figure it out!

THANKS FOR ANY HELP!!!

Answer 1

Drop the show_banner_delay function.
Test it:

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

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