jQueryで要素（画像）を再読み込み/更新する方法

jQueryを使用してサーバーから同じファイル名の画像を再読み込みすることは可能ですか？

たとえば、ページに画像がありますが、物理的な画像はユーザーの操作に基づいて変化する可能性があります。これはファイル名の変更を意味するのではなく、実際のファイル自体を意味することに注意してください。

つまり：

• ユーザーがデフォルトページに画像を表示
• ユーザーが新しい画像をアップロードします
• ページ上のデフォルトの画像は変更されません（これはファイル名が同一であるためだと思います。ブラウザはキャッシュされたバージョンを使用します）

以下のコードが呼び出される頻度に関係なく、同じ問題が解決しません。

$("#myimg").attr("src", "/myimg.jpg");

jQueryのドキュメントでは、「ロード」関数は、コールバック関数を要素のロードの成功/完了にバインドするのではなく、イベントを発生させるデフォルトのメソッドがあれば完璧です。

どんな援助も大歓迎です。

それはあなたのブラウザが画像をキャッシュしているようです（私は今あなたがあなたの質問に書いたことに気づきました）。次のように追加の変数を渡して、ブラウザに強制的に画像をリロードさせることができます：

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

これはおそらく最善の方法ではありませんが、JavaScriptを使用して画像のURLにタイムスタンプを追加するだけで、過去にこの問題を解決しました。

$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

次にロードするとき、タイムスタンプは現在の時刻に設定され、URLは異なるため、ブラウザはキャッシュされたバージョンを使用する代わりに画像に対してGETを実行します。

これは、あなたが言う2つの問題の1つかもしれません。

1. サーバーは画像をキャッシュしています
2. jQueryが起動しない、または少なくとも属性を更新しない

正直なところ、2つ目だと思います。さらにjQueryが表示されれば、はるかに簡単になります。ただし、最初に属性を削除してから、もう一度設定してください。それが役立つかどうかを確認するだけです：

$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");

これが機能する場合でも、これは最適ではないため、いくつかのコードを投稿してください、imo :-)

画像のsrcをjavascriptにハードコーディングすることについて心配することなく、1行で（アイデアについてはjeeroseに感謝します：

$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());

キャッシングをバイパスし、画像のURLに無限のタイムスタンプを追加しないようにするには、新しいタイムスタンプを追加する前に前のタイムスタンプを削除します。これが私が行った方法です。

//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);

function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
    //get the src attribute
    source = jQuery(".xyro_refresh").attr("src");
    //remove previously added timestamps
    source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
    //prep new src attribute by adding a timestamp
    new_source = source + "?timestamp="  + new Date().getTime();
    //alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
    //set the new src attribute
    jQuery(".xyro_refresh").attr("src", new_source);
}

これはうまくいきます！ただし、srcを複数回リロードすると、タイムスタンプもURLに連結されます。私はそれを処理するために受け入れられた答えを修正しました。

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

画像コンテナーhtmlをリセットしてみましたか？もちろん、キャッシュしているのがブラウザの場合、これは役に立ちません。

function imageUploadComplete () {
    $("#image_container").html("<img src='" + newImageUrl + "'>");
}

時々実際のような解決策-

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

また、srcを適切に更新しないでください、これを試してください、それは私のために働きました->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

区切り文字として「＃」を使用すると便利な場合があります

私の画像は「www」の上の「非表示」フォルダに保存されているため、ログインしたユーザーのみが画像にアクセスできます。このため、通常は使用できません<img src=/somefolder/1023.jpg>が、サーバーにリクエストを送信し、<img src=?1023>「1023」という名前で保存された画像を返信します。

このアプリケーションは画像のトリミングに使用されるため、画像をトリミングするajaxリクエストの後、サーバー上のコンテンツとして変更されますが、元の名前は保持されます。トリミングの結果を確認するために、ajaxリクエストが完了した後、最初の画像がDOMから削除され、同じ名前で新しい画像が挿入され<img src=?1023>ます。

キャッシングを回避するために、「＃」を前に付けた「time」タグをリクエストに追加し<img src=?1023#1467294764124>ます。サーバーは自動的にリクエストのハッシュ部分を除外し、「1023」として保持されている画像を送り返すことで正しく応答します。したがって、サーバー側のデコードをあまり行わずに、常に画像の最新バージョンを取得します。

画像ソースを数回再読み込みする必要があるかもしれません。私はLodashでうまくいく解決策を見つけました：

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

既存のタイムスタンプは切り捨てられ、新しいタイムスタンプに置き換えられます。

@kasper Taeymansの回答に基づく。

uが単にイメージをリロードする必要がある場合（srcをsmth newで置き換えるのではなく）、試してください：

$(function() {
  var img = $('#img');

  var refreshImg = function(img) {
    // the core of answer is 2 lines below
    var dummy = '?dummy=';
    img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());

    // remove call on production
    updateImgVisualizer();
  };


  // for display current img url in input
  // for sandbox only!
  var updateImgVisualizer = function() {
    $('#img-url').val(img.attr('src'));
  };

  // bind img reload on btn click
  $('.img-reloader').click(function() {
    refreshImg(img);
  });

  // remove call on production
  updateImgVisualizer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">


<p>
  <label>
    Current url of img:
    <input id="img-url" type="text" readonly style="width:500px">
  </label>
</p>

<p>
  <button class="img-reloader">Refresh</button>
</p>

私は単にこれをhtmlで行います：

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

そして、このようにコードビハインドで画像をリロードします：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}