リロード<img>同じソースの要素

私はURL http://192.168.1.53/html/cam.jpg（ラズベリーパイから）の画像を持っており、この画像は非常に速く変化しています（カメラからのものです）。リロード<img>同じソースの要素

私は、たとえば毎秒このイメージをリロードするウェブサイトにJavaScriptをいくつか載せたいと思います。

私のHTMLは次のとおりです。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Pi Viewer</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
    </head> 
    <body> 

     <style> 
      img,body { 
       padding: 0px; 
       margin: 0px; 
      } 
     </style> 

     <img id="img" src="http://192.168.1.53/html/cam.jpg"> 
     <img id="img1" src="http://192.168.1.53/html/cam.jpg"> 

     <script src="script.js"></script> 
    </body> 
</html>

そして、私のスクリプト：

function update() { 
    window.alert("aa"); 
    document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg"; 
    document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg"; 
    setTimeout(update, 1000); 
} 
setTimeout(update, 1000);

警報が作動しているが、画像が変更されていません：/（私は2枚の画像（それらが同じである）を持っています）

出典

2016-09-27 Martin Tomko

あなたはここでの問題は、画像が毎回同じソースなので、ブラウザがイメージを再ロードしないということである –

2つのIDSおよび単一イメージではない2枚の画像を持っているように見えます。イメージを更新するには、イメージを手動で再ロードする必要があります。 – Aeolingamenfel

イメージを手動でリロードするにはどうしたらいいですか？ページを更新するだけで？それ以外の方法はありませんか？ –

問題は画像srcが変更されていないため、画像が再読み込みされないということです。

イメージが新しいことをブラウザに知らせる必要があります。良いトリックは、常に新しいものとみなされるように、URLにタイムスタンプを追加することです。

function update() { 
    var source = 'http://192.168.1.53/html/cam.jpg', 
     timestamp = (new Date()).getTime(), 
     newUrl = source + '?_=' + timestamp; 
    document.getElementById("img").src = newUrl; 
    document.getElementById("img1").src = newUrl; 
    setTimeout(update, 1000); 
}

出典

2016-09-27 19:07:36

ありがとう！これは動作します;） –

リロード<img>同じソースの要素

答えて

関連する問題