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);
}

注意：

888是计时器延迟，以毫秒为单位。出于可用性原因，我建议不要将其大于1000 - 这是1秒。
没有noCacheURL延迟值。因为noCacheURL的值是由毫秒时钟设置的，所以每次页面加载时它的值总是不同。

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

如果您使用动态生成的图像（看起来很可疑）并缓存服务器端，那么它的超时是一个不同的问题，您需要单独询问。

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

1 个答案: