-1

1ミリ秒ごとに自動的に更新されるhtmlページがあります。私はmataタグを使用してそれを行いました：

 <html>
   <head>
     <title>My Page</title>
     <meta http-equiv="refresh" content="0.001">
   </head>

   <body>
     <img src=" 0.bmp" alt="Smiley face" height="100" width="200" />
   </body>
 </html>

今の私の要件は、更新するたびに新しいファイルをロードする必要があるということです。したがって、私のフォルダには、0.bmp、1.bmp、2.bmp、...1000.bmpという名前のファイルがあります。これらのファイルはhtmlファイルにロードされます。つまり、更新するたびに、フォルダから新しいファイルがロードされます。基本的にのファイル名

   <img src=" 0.bmp" alt="Smiley face" height="100" width="200" />

0.bmpから1...1000.bmpなどに変更されます。

HTMLでこれを行うにはどうすればよいですか？つまり、ファイル名を動的に変更できますか？

編集＃1：

私の問題は基本的にアニメーションにあることに気づきました。したがって、ハードディスクに保存されている1000個の画像を考えると、HTMLページでそれらを1つずつ再生する必要があります。これはできるだけ速くする必要があります。唯一の要件は、HTMLページ上にある必要があることです。これは、これらのHTMLページがネットワーク内のクライアントからアクセスされるためです。私が考えている問題は、ディスクへの読み取り/書き込みが高速でない可能性があるため、再生が遅いことです。

編集＃2

以下の回答から入力を得た後、画像をアニメーション化することができました。私が今直面している問題は、表示率が小さすぎるため、変動が生じていることです。これはハードディスクからの読み取り/書き込みが遅い問題だと理解しています。したがって、これらの画像をバッファ、つまりシステムRAMに配置し、ディスクではなくRAMから画像にアクセスするためのhtml / jsコードを記述できれば、再生ははるかに高速になります。誰かが私にサンプルコードを送って、RAMに画像を書き込み、html / jsコードを使用してRAMからこれらの画像にアクセスできますか？

注：stackoverflowのポリシーに従って、元の問題のさまざまな手順を解決するときに、質問を更新しています。

4

4 に答える 4

2

あなたがやろうとしていることは、ウェブページを継続的に更新することによってではなく、Javascriptを使用することによって行われるべきです。

JQUERYとsetInterval（）を使用したこのメソッドを検討してください。

実用的なフィドルの例をご覧ください！

HTML

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <img src="path_to_image_01.jpg" alt="Smiley face" height="128" width="128" />
    <img src="path_to_image_02.jpg" alt="Smiley face" height="128" width="128" />
    <img src="path_to_image_03.jpg" alt="Smiley face" height="128" width="128" />
    <img src="path_to_image_04.jpg" alt="Smiley face" height="128" width="128" />
     </body>
 </html>

JQUERY

$(document).ready(function() {
  $('img:not(:first)').hide();

  var refreshId = setInterval( function()
  {
    var $target = $('body img:first');
    $target.hide().next().show();
    $target.appendTo('body');
  }, 1000);
});

何が行われている

すべての画像を非表示

`$('img:not(:first)').hide();`

最初の画像を収集し、非表示にし、次の画像にジャンプして表示し、最後に前の画像を最後に移動する1秒の間隔を初期化します。

var refreshId = setInterval( function()
{
  var $target = $('body img:first');
  $target.hide().next().show();
  $target.appendTo('body');
}, 1000);

これにより、通過する1秒ごとに画像のアニメーションが継続されます。

于 2012-05-14T11:44:49.293 に答える
1

しないでください、本当にこれをしないでください！代わりにJSを使用してください。setInterval()1mを超える期間を使用して使用してください...

于 2012-05-14T11:26:21.953 に答える
1

今は別の質問に基づいて回答を更新しています。

このプラグインを使用できます：https ：//code.google.com/p/jsmovie/ 一連の画像をアニメーション化することで、まさにあなたが望むことを実行します。

以下の元の回答：

私は他の多くの答えに同意しますが、OPはページをリロードせずにajaxを介してこれを行うのではなく、ウィンドウ全体を更新する必要があるようです。

<img src="" alt="Smiley face" height="100" width="200" style="display:none" />


function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

var imgIndex = 0;

$(document).ready(function() {

    if (getParameterByName("index")!='') {
       imgIndex = parseInt(getParameterByName("index"));
    }

$('img').attr('src', imgIndex + '.bmp').show();

   var refreshId = setInterval( function()
    {

      imgIndex++;
      location.href = location.pathname + "?index=" + encodeURIComponent(imgIndex); 

    }, 1000); // 1 second update as needed

});

次のフィドルはこれを示していますが、画像のシリアルセットがないため、jsfiddleは、前の回答からフォークされた既に設定された画像のインデックスを更新するという点で少し異なりますが、ページのリロードを示しています。

http://jsfiddle.net/smf9w/1/

</ p>

于 2012-05-14T12:32:29.567 に答える
0

他の人が言うように、これはそれを行う方法ではありません。ただし、最新のブラウザではCookieまたはlocalstorageを使用できます。

  function getData() {
    var c = 0;
    if ("localStorage" in window && null !== window.localStorage)
       c = localStorage.count;
    else {
      count = document.cookie.split("count=");
      c = c[1].split(";");
      c = c[0];
    }
    return c;
 }

    function updateData(count){
       if ("localStorage" in window && null !== window.localStorage)
           localStorage.count = count;
        else {
            var e = new Date;
            e.setTime(e.getTime() + 31536E6);
            e = e.toGMTString();
            document.cookie = "count=" + count + "; expires=" + e + "; path=/"
        }
    }
 var count = getData();
 document.write('<img src="'+ count +'".bmp" alt="Smiley face" height="100" width="200" />');
 updateData(++count);

上記のコードは単なるサンプルです。

于 2012-05-14T12:16:31.660 に答える