Delayed loading GIF image from CSS background

Question 1

Look this link. It is very simple and I don't think you need comments. Another question is how to set up time to each image.

Time to use some jQuery:

Your html code:

<div class='ads'></div>
<div class='ads'></div>

And the css code:

.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
}

Your jQuery code:

$(".ads").each(function() {
    var timestamp = $.now();
    $(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});

Your jQuery code have to be placed into the .js file. Do you have some js files? If yes, then add my code into onload handler. If you don't have any create new file, say, scripts.js and put this code into it:

$(document).ready(function()
{
    $(".ads").each(function() {
        var timestamp = $.now();
        $(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
    }); 
}

Explanation:

.ready function means that all instructions in body of this function will be read and started on page load. You don't need them to work before page loaded, right?
$(".ads") — we get element with selector .ads (with class ads).
$(".ads").each(function() { /* body */ } — .each function means that we will assign instructions from function body to all elements with selector .ads
var timestamp = $.now(); — getting timestamp and assigning it into variable
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); — adding css property to $(this) element (this element is current element with selector .ads)

Thats all. Simple. Now you have file scripts.js with content above. Put it somewhere on your site, where you usually put your media files. For example, {root}/media/ <-- here.

The last thing you should do is link your new js file and jQuery library. Note, that jQuery library have to be linked before file, using $ variable.

Add next code to the <head></head> tag to your view:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/script.js"></script>

Don't forget to do all js actions in onload handler.

Hope this will help. Tell me about result, please.

JSFIDDLE

Question 2

A possible solution for option 1, is to check with javascript (or preferably jquery) if the banner is visible. (You probably need to put a setTimeout around it, because as far as I know the page js loads first, and after that the adblocker js.

var ads = $('.ads').filter(':visible');
if(!ads.length) {
    //do your alternative image showing magic here
}

A possible solution for option 2 might be to link to a php script and put a sleep(2); inside it, with after that the appropriate headers and print/echo of the image.