は、どのようにそれが動作しますいくつかのランダムな番号を追加

Question

をキャッシュいくつかの背景画像を防ぐために、唯一のキャッシュPRPを防ぐために、どのような方法があります

<img src="example.jpg?377489229" /> 

IMGため。 background-image？

<div style="background-image: url(example.jpg )"></div>" 

Answer 1

同じテクニックがそこで動作します。

<div style="background-image: url(example.jpg?377489229)"></div> 

あなたのサーバがそのGETパラメータの存在と異なって動作すると仮定します。

これはキャッシュを一度だけ破棄しますが、常にサーバーにヒットしたい場合は、いくつかの異なる手法を使用する必要があります。

Answer 2

クエリのparamとしてダイナミックタイムスタンプ付き画像のURLを生成するには、動的背景画像のURLに最新のタイムスタンプを追加し、次のようなものでしょう、少なくともJavaScriptコードが必要です：あなたはこれを使用することができます

someimage.jpg? (new Date()).getTime() => someimage.jpg?1479341018085 

を例：

function getNoCacheBgElements() { 
 
    return document.querySelectorAll('.no-cache-bg'); 
 
} 
 

 
function loadBgImageForElement(element) { 
 
    element.style['background-image'] = 
 
    'url('+ element.attributes['data-background-image'].value + '?' + (new Date()).getTime() +')'; 
 
} 
 

 
function loadBgImages() { 
 
    for(
 
    var i = 0, elements = getNoCacheBgElements(); 
 
    i < elements.length; 
 
    loadBgImageForElement(elements[i]), i++ 
 
); 
 
} 
 

 
window.onload = function() { 
 
    loadBgImages(); 
 
};

.size-100x100 { 
 
    min-width: 100px; 
 
    min-height: 100px; 
 
} 
 
    
 
.float-left {float: left;} 
 
.margin-10 {margin: 10px;}

<p> These background images loaded dynamically every time You hit "Run code snippet". </p> 
 

 
<div class="no-cache-bg size-100x100 float-left margin-10" data-background-image="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg"></div> 
 

 
<div class="no-cache-bg size-100x100 float-left margin-10" data-background-image="http://lorempixel.com/output/abstract-q-c-640-480-9.jpg"></div> 
 

 
<div class="no-cache-bg size-100x100 float-left margin-10" data-background-image="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg"></div> 
 
    
 
</br> 
 
<p> Check browser's network tab and You'll see that it requests for images on every page load. </p>