バックグラウンドイメージを遅延させてキャッシュを停止する

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

私はキャッシュを停止しようとしていないお勧めします。あなたのユーザーを悩ませたくないtoo ;）

しかし、それを行うための一つの方法は、リソースの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の値はミリ秒クロックで設定されているため、値は常に各ページの負荷ごとに異なります。

   したがって、ユーザーのブラウザは常にユーザーのキャッシュをバイパスして新しいコピーを要求します。

   サーバーサイドで動的に生成されたイメージ（疑わしいと思われる）を使用している場合は、タイムアウトは別に質問する必要があります。