Question

这是我的情况;我正在我的网站上展示广告，但如果访问者使用广告拦截器，我想要显示特定的横幅广告。我首先想到的是一个检测广告拦截器的脚本，但在尝试了几个不同的脚本之后，它们中的大多数似乎不再起作用（至少，我无法让它们工作）。

所以我放弃了，并采用了不同的解决方案。在广告背后显示CSS背景图像，以便在未显示广告时，图像为。由于典型广告需要花费一些时间来加载，因此我将背景图片设为GIF图像，并且透明度为2秒。这首次就像魅力一样，但当你重新加载页面或打开一个不同的页面时，GIF动画不会播放，并立即显示最后一帧，跳过透明度。

我已经尝试在CSS中添加随机内容，但这不起作用。我已经尝试了图像的数据/内联版本，但似乎也没有用。我的解决方案已经不多了。

CSS：

.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
background-image:  url('/images/ads/ads_top.gif?randomstuff=39485')
}

我基本上都在寻找;

1）如果广告被屏蔽（仍然是实际且有效），则显示替代图片的方式。

2）延迟加载CSS背景图像的方法。

3）防止GIF被缓存或强制重放每个页面加载动画的方法。

任何这些都可以解决我的问题。希望有人能够提供帮助。

谢谢！

Answer 1

选项1的可能解决方案是使用javascript（或最好是jquery）检查横幅是否可见。（你可能需要在它周围放一个setTimeout，因为据我所知，首先加载页面js，然后加载adblocker js。

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

选项2的一个可能的解决方案可能是链接到php脚本并在其中放置sleep(2);，之后是相应的标题和图像的打印/回显。

Answer 2

看this link。这很简单，我认为你不需要评论。另一个问题是如何为每个图像设置时间。

时间使用一些jQuery：

您的HTML代码：

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

和css代码：

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

您的jQuery代码：

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

您的jQuery代码必须放在.js文件中。你有一些js个文件吗？如果是，则将我的代码添加到onload处理程序中。如果您没有任何创建新文件，例如scripts.js并将此代码放入其中：

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

说明：

.ready函数意味着所有指令都在此函数将在页面加载时读取并启动。你不需要它们在页面加载之前工作，对吗？
$(".ads") - 我们使用选择器.ads获取元素（使用类ads）。
$(".ads").each(function() { /* body */ } - .each函数意味着我们会将函数体的指令分配给具有选择器.ads的所有元素
var timestamp = $.now(); - 获取时间戳并将其分配给变量
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); - 将css属性添加到$(this)元素（this元素是带有选择器.ads的当前元素）

多数民众赞成。简单。现在您的文件scripts.js包含上述内容。将它放在您网站上的某个位置，您通常会放置媒体文件。例如，{root}/media/＆lt; - here。

你应该做的最后一件事是链接你的新js文件和jQuery库。注意，jQuery库必须在文件之前使用$变量进行链接。

将<head></head>标记的下一个代码添加到您的视图中：

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

不要忘记在onload处理程序中执行所有js操作。

希望这会有所帮助。请告诉我结果。

JSFIDDLE

从CSS背景延迟加载GIF图像

2 个答案: