によりwebブラウザなキャッシュ画像

https://stackoverflow.com/questions/126772

02-07-2019
|

質問

背景

皆様にお伝えしたくて書き込み用シンプルなCGI-ベース(Perl)コンテンツ管理ツールのための二つのプロボノイントです。このウェブサイト管理者HTMLフォームイベントが彼らの分野の日時、場所、タイトル、説明、リンク等について) として保存することができます。その形ることで、管理者のアップロード画像に関するイベントです。HTMLのページを表示する形で、私もプレビュー画像のアップロード(HTML imgタグ).

の問題

この問題の場合は管理者が変更したい画像になります。そしてヒットする"閲覧"ボタンを押すと、ピ新しい画像としてokボタンを押します。この作品です。

一度に画像をアップロード、バックエンCGIのアップロード及び固形。

問題は、画像表示ないリフレッシュ。の画像が表示されていても、データベースをイメージです。私に絞って、その画像をキャッシュのウェブブラウザです。管理者がヒットのリロードボタンFirefox/Explorer/サファリ、単に絞りリフレッシュの新しいだけでもイメージが表示されます。

私の液な

って制御するキャッシュに書いてHTTPの満了日の指示に日付である。

Expires: Mon, 15 Sep 2003 1:00:00 GMT

こんに行政側という場合にはページかりとなる負荷が常に終了しました。

でもませんが、これは動作しません。

注記

アップロード時に画像を、そのファイル名ではないのデータベースです。あと改称 Image.jpg (でも使用する場合).交換時には、既存の画像から新しいもので、名前変更しません。のコンテンツの画像ファイルに変わります。

のウェブサーバのホスティングサービス/す。このApache.

質問

があるので、webブラウザでないキャッシュのものか、本ページからないからです。

私はジャグリングのオプションを実際に"保存ファイル名"のデータベースです。この場合、画像の変更があったsrcのIMGタグも変化します。しかし、この要求の変化にとんでいていただいています。また、これも動作しない場合は新しい画像をアップと同じ名前の画像がphotoshopped少再掲).

解決

んにちわ!Ronacherは、正しいアイデアです。の問題がランダムな文字列で衝突させる.混雑して待たされること:

<img src="picture.jpg?1222259157.415" alt="">

が"1222259157.415"は、現在の時間、サーバーにコピーします。
発生時のJavascript performance.now() やPython time.time()

他のヒント

簡単な問題の修正を添付してランダムクエリ文字列をイメージ：

<img src="foo.cgi?random=323527528432525.24234" alt="">

何を行うHTTPのRFCは

Cache-Control: no-cache

が動作しないこと。

使ってい PHPのファイルの更新日時の機能, 例えば:

echo <img  src='Images/image.png?" . filemtime('Images/image.png') . "'  />";

変更した場合の画像の新しい画像に使用するように、キャッシュに格納された、より異なる変更時刻です。

混雑して待たされること:

<img src="picture.jpg?20130910043254">

が"20130910043254"の修正時間のファイルです。

アップロード時に画像を、そのファイル名ではないのデータベースです。あと改称Image.jpg (でも使用する場合).交換時には、既存の画像から新しいもので、名前変更しません。のコンテンツの画像ファイルに変わります。

と思うの二種類があり簡単なソリューション1)方を思い浮かべるかもし最初の(簡単なソリューション、いやく),2)で最後の思考えです。うん、常に利益を選択した場合に考えています。のオプションは過小評価されると確信しています。思うだけではなぜ php ある;)

スに書きプロキシスクリプトのための画像がオーストラリア国内作品になってる。ものが好きです:

HTML:

<img src="image.php?img=imageFile.jpg&some-random-number-262376" />

スクリプト:

// PHP
if( isset( $_GET['img'] ) && is_file( IMG_PATH . $_GET['img'] ) ) {

  // read contents
  $f = open( IMG_PATH . $_GET['img'] );
  $img = $f.read();
  $f.close();

  // no-cache headers - complete set
  // these copied from [php.net/header][1], tested myself - works
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
  header("Cache-Control: no-store, no-cache, must-revalidate"); 
  header("Cache-Control: post-check=0, pre-check=0", false); 
  header("Pragma: no-cache"); 

  // image related headers
  header('Accept-Ranges: bytes');
  header('Content-Length: '.strlen( $img )); // How many bytes we're going to send
  header('Content-Type: image/jpeg'); // or image/png etc

  // actual image
  echo $img;
  exit();
}

実際にはno-cacheヘッダやランダムに数字画像srcは十分にできているの防弾..

私は新しいメリカ-サンフランシスコのだが、ここでの私たは、ブラウザからのキャッシュを持っwebカメラビューもあります:

<meta Http-Equiv="Cache" content="no-cache">
<meta Http-Equiv="Pragma-Control" content="no-cache">
<meta Http-Equiv="Cache-directive" Content="no-cache">
<meta Http-Equiv="Pragma-directive" Content="no-cache">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

などの作品を何ブラウザでは一部:IE:作品が当ホームページに掲載しリフレッシュがサイトを再訪（リフレッシュ).CHROME:作品の場合のみ当ホームページに掲載しリフレッシュ(後も再訪).サファリは、iPad:ない履歴をクリアするには、一度に多数のユーザーデータです。

そのアイデアにサファリ/iPad?

使用 Class="NO-CACHE"

サンプルhtml:

<div>
    <img class="NO-CACHE" src="images/img1.jpg" />
    <img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>

jQuery:

    $(document).ready(function ()
    {           
        $('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() });
    });

javascript:

var nods = document.getElementsByClassName('NO-CACHE');
for (var i = 0; i < nods.length; i++)
{
    nods[i].attributes['src'].value += "?a=" + Math.random();
}

結果：src="images/img1.jpg" => src="画像/img1.jpg?a=0.08749723793963926"

アップロード時に画像を、そのファイル名ではないのデータベースです。あと改称Image.jpg (でも使用する場合).

変更するとすごく少ないのですが確定問題です。使用タイムスタンプとしての提案、上記の 画像<timestamp>.jpg

おそらく、何の問題だけを避けることで同じファイル名の画像を乗り越えることができると思うが、にんに言います。

いすべての回答をウェブ、最高のおすすめ:(か)

<img src="image.png?cache=none">

ります。

ただし、追加 キャッシュ=】なし パラメータ（静"なし"味するものではありませんの効果も、ブラウザも負荷のかかります。

こうした問題をクリアできるた

<img src="image.png?nocache=<?php echo time(); ?>">

場所は基本的に追加unixタイムスタンプのパラメータの動的なキャッシュ内にあります。

しかし、私の問題とはちょっと違った:また荷重が発生するphp図画像-制御のページを$_GETパラメータ。たいと思った画像の読み込まれるキャッシュのパラメータの取得は同じなキャッシュのパラメータを取得します。

この問題を解決するためのハッシュ$_GETものでは配列の解

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

編集:

は上記のソリューションでは、イブレア城、イブレア大行ないますが、場合によって、キャッシュ版までのファイルが変更されます。(上記溶液、キャッシュを無効にしたイメージを完全に) なので、キャッシュされた画像からのブラウザでの変化があり、画像ファイルの使用

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

filemtime()このファイルを変更。

また問題にもかかわらず、 Expires: ヘッダ、ブラウザを再使用、そのメモリコピーの画像からの前にさかの更新によっても確認をします。

また同様の状況をアップロード製品の画像は管理者バックエンドのマーケット-のように、私の場合は決定した最良のオプションのためにjavascriptを使用力に画像をリフレッシュを使用せず、URLの改質技術を他の人に既述のとおりです。代わりに、画像のURLを隠しIFRAMEと呼ばれる location.reload(true) のIFRAMEのウィンドウの交換私のイメージのページです。この力によりリフレッシュの画像だけでなく、そのページんなによってはそれ以降のページを訪れていないはクライアントやサーバーに記憶すURL querystringはフラグメント識別子のパラメータ

私はあいにくのコードをこの私の回答こちらの.

追加タイムスタンプ <img src="picture.jpg?t=<?php echo time();?>">

もしファイルに乱数の停止でキャッシュ

の可能性がひどく骨を透過プロキシの間に、クライアントのみを完全に保証する画像のキャッシュされませんがう独自のuriのようにタグ付けするタイムスタンプとして、クエリー文字列の一部のパスです。

そのタイムスタンプに対応した最終更新時間の画像きますので、そのキャッシュが必要な場合には、の新しいイメージだけます。

そして独自の問題についてに保存されている写真-画像がテキスト情報なので、アクセスできる場合はテキストの文脈を発生する場合にsrc=...url配慮し、店舗利用CRC32画像のバイト数ではなく意味がないランダムまたは時刻スタンプを記録します。そして、そのページをたっぷりの画像を表示し、更新の画像を再読み込み.その後、場合CRCの保存は不可能で算出することが可能で、別のurlを行います。

私なりの視点からを無効にする画像のキャッシュん。ます。

根本問題ここではよりブラウザの更新画像が更新されているサーバー側となります。

再び、私の個人的見解であり、最適なソリューションは無効に直接アクセスす。代わりにアクセス画像のサーバーサイドフィルター/servlet/その他類似のツール／サービス

私の場合で他サービスを返す画像付ETagのです。本サービスの常のハッシュのすべてのファイルの場合、ファイルを変更し、ハッシュが更新されます。でコンビニエンスストアでのすべての最新ブラウザを推奨いたします。あり時間がかかっていプロジェクトを実施するもので館内は、ゆったりしていました。

唯一の例外はえる機能を加えた何らかの理由で動作しません。ない力でブラウザの更新をキャッシュからサーバ側です。ETags、キャッシュ制御の満了日Pragmaヘッダ、何も手助けになるかもしれません。

この場合、一部のランダム-バージョンパラメータをurlにとってだけがたった一つの解決策です。

理想的には、追加ボタン/keybinding/メニューをそれぞれのウェブページがオプションを同期させます。

だいトラックの資源が必要となる可能性があるような同期することは、いずれかを使用xhrをプローブ画像のダイナミックなquerystringは、イメージを実行時とsrc動querystring.使用放送機構がすべての人に周知し、部品のウェブページを使用するリソースへの更新利用資源のダイナミックなquerystring追加される。

るナイーブの例のようになります。

通常の画像が表示され、キャッシュされたものの、ユーザの場合、ボタンを押すと、xhr送信されたリクエストであることを資源と時間querystring追加されな以降、時間と仮定とは異なるそれぞれのプレスで閲覧できてしまうことをバイパスのキャッシュのでないかどうかのリソースを動的に発生するサーバ側のクエリの場合、または静的資源を無視したモードです。

その結果を回避のためすべてのユーザー bombardす資源要求が同時にできる機構をユーザーが更新でその資源がいい。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="mobile-web-app-capable" content="yes" />        
    <title>Resource Synchronization Test</title>
    <script>
function sync() {
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {            
            var images = document.getElementsByClassName("depends-on-resource");

            for (var i = 0; i < images.length; ++i) {
                var image = images[i];
                if (image.getAttribute('data-resource-name') == 'resource.bmp') {
                    image.src = 'resource.bmp?i=' + new Date().getTime();                
                }
            }
        }
    }
    xhr.open('GET', 'resource.bmp', true);
    xhr.send();
}
    </script>
  </head>
  <body>
    <img class="depends-on-resource" data-resource-name="resource.bmp" src="resource.bmp"></img>
    <button onclick="sync()">sync</button>
  </body>
</html>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow