javascript - 延迟背景图像并阻止其被缓存

Question

我设置了一个背景图像，以显示在广告位的位置/后面，以防广告拦截。但是，我需要将其延迟到广告展示之后。

我使用以下代码，但是图像延迟的时间不够长。

<script type="text/javascript" language="JavaScript">
var resources = {div1:"url('/images/image1.png')",div2:"url('/images/image2.jpg')"};
function loadImageBG(id) {
  document.getElementById(id).style.backgroundImage = resources[id];
}
</script>

另外，如何阻止图像被缓存？

这是一个 WP 站点，我使用的是 WP Super Cache；我发现插件中没有任何功能可以执行此操作，尽管如此，我不确定这是否足以用于浏览器缓存。

Answer 1

一个简单、可靠的方法是使用计时器。考虑到广告加载时间的变化无常——以及是否加载——它不会是完美的。但这比尝试确定广告何时加载或是否加载要简单得多。

尝试如下:

function loadImageBG (id) {
    setTimeout ( function () {
        document.getElementById (id).style.backgroundImage = resources[id];
    }, 888);
}

我建议不要尝试停止缓存；您不想让您的用户太烦恼。 ;)

但是，一种方法是将唯一参数附加到资源 URL:

function loadImageBG (id) {
    setTimeout ( function () {
        var d           = new Date();
        var milliSecs   = d.getTime();
        var noCacheURL  = resources[id].replace (/'\)/, "?nc=" + milliSecs + "')");

        document.getElementById (id).style.backgroundImage = noCacheURL;
    }, 888);
}

<小时/>

注释:

1. 888 是以毫秒为单位的计时器延迟。出于可用性原因，我建议不要将其设置为大于 1000——即 1 秒。

2. 没有 noCacheURL 延迟值。由于 noCacheURL 的值是由毫秒时钟设置的，因此每次页面加载时它的值始终会有所不同。

   因此，用户的浏览器将始终绕过用户的缓存来请求新的副本。

   如果您使用动态生成的图像(似乎值得怀疑)并在服务器端缓存该，那么它的超时是一个不同的问题，您需要单独询问。