3

たくさんのウェブカメラ画像を表示し、定期的に更新して、ページを一目で監視できるようにするページを作成しています。ただし、定期的なリロードを機能させるのに問題があります。私のコードは次のようになります。

<div class='cameras'> 
    <div class='camera'> 
      <h4>Desk</h4> 
      <img height='240' src='http://somehost/cameras/cam0/lastsnap.jpg' width='320'> 
    </div> 
    <div class='camera'> 
      <h4>Main Room</h4> 
      <img height='240' src='http://somehost/cameras/cam1/lastsnap.jpg' width='320'> 
    </div> 
    <div class='camera'> 
      <h4>Studio</h4> 
      <img height='240' src='http://somehost/cameras/cam2/lastsnap.jpg' width='320'> 
    </div> 
  </div>

理想的には、カメラごとに個別のJSを生成することなく、指定されたURLから数秒ごとにこれらのものをリロードしたいと思います。私は他のいくつかのビットにjQueryを使用しているので、それに固執するのは素晴らしいことです-そして、繰り返しますが、プレーンなJSソリューションも問題ありません。

何かアイデアはありますか、StackOverflow JS Gods？

4

4 に答える 4

7

さて、これを解決しました：

function refreshCameras() {
  $('.camera img').attr('src', function(i, old) { return old.replace(/\?.+/,"?i=" + (Math.random()*1000)); });
  setTimeout(refreshCameras, 1000);
}
function refreshCamerasFirst() {
  $('.camera img').attr('src', function(i, old) { return old + "?i=" + (Math.random()*1000); });
  setTimeout(refreshCameras, 1000);
}
$(function() {
    setTimeout(refreshCamerasFirst, 1000);
});

「camera」クラスのすべての img 要素を取得し、URL に追加された乱数を介してキャッシュバスティングで毎秒更新します。これは、正規表現を使用して既存の番号を置き換えることで、URL を過度に長くすることなく、リロードごとに変更されます。

于 2010-10-10T03:08:56.940 に答える
2

画像に画像ソースを生成する [定期的な間隔で]

var img = []; //just an image source. you can write your own code for image source

img[0] ='http://site.com/pics/pic.jpg';
img[1] ='http://site.com/pics/pic1.jpg';
img[2] ='http://site.com/pics/pic2.jpg';
img[3] ='http://site.com/pics/pic3.jpg';

$(function() {
    $.each(img, function(i, val) {
        var images = new Image();
        images.src = val;    //preloading images for my example purpose
    });
    function reload() {
        $('img.alter').each(function() { //generate a url for  image source. 
            var src = img[Math.floor(Math.random() * img.length)];
            $(this).attr('src',src);
        });
    }   
    setInterval(reload , 5000)
});

ここでテストしてください

PS : この手法では、ページ全体をリロードする必要はありません

于 2010-10-10T03:39:28.163 に答える
1

ページのメタタグを次のように書き換えてみてください

<meta http-equiv="Refresh" content="2; URL=yourpage.php">

テキストでクールに機能します。画像でチェックアウト

于 2010-10-10T03:09:58.963 に答える
1

指定した期間にページを更新したい場合は、html でもそれを行うことができます

このタグをページの head タグに追加します

<meta http-equiv="refresh" content="1">

ここで content は秒単位の期間です これを参照してください

http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm

于 2010-10-10T03:12:35.183 に答える