JavaScriptを使用して30秒ごとにオフサイトの画像ソースを再読み込みするにはどうすればよいですか？

Question

別のソースから、オフサイトソースから30秒ごとにリフレッシュする必要のあるイメージがあります。私はページ全体の再読み込みを避けるためにこれを達成するためにJavaScriptを使用したいと思います。

現在、私はこの質問に似た何かをしようとしました：「reloading a page after every 10 sec in rails 3.1」

（これはRailsアプリケーションですが、私はおそらくこの場合でRailsの具体的な答えを必要としません。）

を

それにもかかわらず、リンク+画像の周りにdivを追加しても、画像自体にdivを追加しても、私は目に見えない結果に終わります。この例では、両方のソリューションをreload.jsという要素を作成してみました。

答えとしてマークされている最初の解決策は、ほとんどすべてのページ要素が欠けているページをリロードするだけです。 2番目の解決策は、私が最初のリフレッシュ時に実際に表示される画像を、リンク+画像をdivで囲む際に消えますが、実際の画像タグに作用しているidを置くと何も表示されません。

JSは現時点で私にとって強い訴訟ではないので、私はかなり単純なものが欠けていると確信しています。

最後に、私はリフレッシュするいくつかのソースを持っており、可能であればクラスに対してこれを実行する例を見たいと思いますが、それぞれを詳細に制御することは、リフレッシュの時間。

Answer 1

あなたがjQueryのためにアップしている場合は、これは非常に簡単に行うことができます。

$(function() { 
    setInterval(function() { 
    $('img').each(function() { 
     $this = $(this); 

     $this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime()); 
     console.log($this.prop('src')); 
    }); 
    }, 30 * 1000); 
}); 

ブラウザのキャッシュを防止するために、あなたはブラウザをだますとGETリクエスト変数timestampで画像をロードする必要があります。パラメータが何であるかは関係ありませんが、URLが変更されるため、画像は新しいものからキャッシュから読み込まれることはありません。

---

jQueryはCSSライクなセレクタを使用することで有名です。

は、これらのいずれかで $('img')を交換してください：あなたの結果をフィルタリングすることができ :not()セレクタ、もあります

$('img.yourClassName'); // Class 
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id 
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id". 

：

$('img.yourClassName:not(.do-not-reload)'); 
$('img.yourClassName:not([src="img/spinner-skip.gif"])');