image feed refresh with jQuery/ajax

Question

私は複数の出力を持つAxisカメラを持っています。その1つはjpg画像です。この画像は、カメラをロードした時点でまだカメラから撮影されたものです。私は、ページ全体をリロードしなくても、イメージをリロードする方法（30秒ごと）を実装したいと思いますが、ブランク画面が表示されないように、コードを更新する前にコードを完全にダウンロードしてください。

私はこの記事を投稿しましたが、私が見つけた最も近いものはUsing AJAX/jQuery to refresh an imageでしたが、違いは実際のカメラ自体からは画像ファイルが来ていないということです。私は私のURLでこれを動作させるためにいくつかの方法を試しましたが、JavaScriptの知識が不足しているために失敗しました。

私は画像をプルアップするために、今使っているコードは、単純なイメージタグです...

<img src="[camera ip]/jpg/1/image.jpg">

と、ブラウザウィンドウを更新し、いつでも、それはあなたのスナップショットを提供します現在のビデオストリーム。

ご協力いただければ幸いです！

よろしく、
ハビエル

Answer 1

私はに対してこれをテストするには爽やかなイメージとオンラインウェブカメラを見つけることができませんでしたが、私はこれがあなたのためにトリックするためにすべきだと思う...または少なくともあなたが本当に近づき...

<script> 
// URL to your cam image 
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg'; 

var buffer = {}; 
function preload() { 
    buffer = new Image(); 
    // attaching the seconds breaks cache 
    buffer.src = cam_image + '?' + (new Date()).getTime(); 
    buffer.onload = function() { 
     setTimeout(preload, 30000); // 30 seconds refresh 
     document.getElementById('myimg').src = buffer.src; 
    } 
} 
preload(); 
</script> 

Answer 2

あなたは絵の静的グループで作業している場合 - あなたはすでにファイル名を知っているし、変更するつもりはない - あなたが最初にあなたのhtmlにすべてをロードします（つまり、空白の画面を解決jqueryプラグインを使用して、指定した間隔で画像を回転/更新します（30秒など）。それらを介して

<ul> 
    <li><img src="[camera ip]/jpg/1/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/2/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/3/image.jpg"></li> 
    ... 
</ul> 

そしてプラグインでしょうサイクル：

だから、あなたのHTMLは次のようになります。プラグインの

、これら二つのいずれかを使用します。

http://nivo.dev7studios.com/

http://jquery.malsup.com/cycle/

幸運を！