从 CSS 背景延迟加载 GIF 图像答案

【问题标题】：Delayed loading GIF image from CSS background从 CSS 背景延迟加载 GIF 图像
【发布时间】：2014-06-05 21:35:14
【问题描述】：

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

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

我尝试在 CSS 中的 URL 后面添加随机内容，但没有成功。我尝试了图像的数据/内联版本，但似乎也不起作用。我的解决方案有点用完了。

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 被缓存或在每次页面加载时强制重播动画的方法。

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

谢谢！

【问题讨论】：

标签： html css image ads animated-gif

【解决方案1】：

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

是时候使用一些 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/

您应该做的最后一件事是链接您的新 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

【讨论】：

除了 jQuery 代码我什么都懂。使用它还是很新，所以你能详细说明它需要放置在哪里以及如何放置？
@TigerXtrm，我更新了我的答案。另外，不要忘记使用 jsFiddle 示例。
似乎可以通过直接粘贴在某些
究竟是什么？请注意，我的脚本需要 jQuery 库。我解释了我的脚本的作用，如果您有任何问题，请使用它。如果有什么不清楚的地方可以问我。
为什么相同的数据有不同的类？您可以在 jQuery 中指定超过 1 个选择器。使用$(".class1, .class2")

【解决方案2】：

选项 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);，然后是适当的标题和图像的打印/回显。

【讨论】：