[解決済み] 同じURLの画像を新しいものに更新する
2022-02-07 10:16:12
質問
私のサイトのリンクにアクセスすると、アクセスするたびに新しい画像が提供されます。
問題は、バックグラウンドで画像を読み込んでからページ上の画像を更新しようとすると、画像は変更されず、ページを再読み込みすると更新されることです。
var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
function updateImage()
{
if(newImage.complete) {
document.getElementById("theText").src = newImage.src;
newImage = new Image();
number++;
newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
}
setTimeout(updateImage, 1000);
}
FireFoxが見たヘッダー。
HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT
ページ上のその画像だけを強制的に更新したいのですが。何かアイデアはありますか?
解決方法は?
私が最終的に行ったのは、サーバーに、そのディレクトリにある画像へのリクエストを、更新しようとしているソースにマッピングさせることでした。そして、DOMがそれを新しい画像とみなして読み込むように、タイマーに名前の最後に数字を追加させたのです。
例
http://localhost/image.jpg
//and
http://localhost/image01.jpg
は同じ画像生成コードを要求しますが、ブラウザからは異なる画像に見えます。
var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
var count = 0;
function updateImage()
{
if(newImage.complete) {
document.getElementById("theText").src = newImage.src;
newImage = new Image();
newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
}
setTimeout(updateImage, 1000);
}
関連
-
[解決済み] ブラウザによって異なるURLの最大長とは?
-
[解決済み] リモート Git リポジトリの URI (URL) を変更するには?
-
[解決済み] URI、URL、URNの違いは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] JavaScriptの「new」キーワードとは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み】Vueが定義されていない
-
[解決済み] ウェブブラウザに画像をキャッシュさせない方法