-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 页面上一张一张地播放它们。这应该尽可能快。唯一的要求是它必须在 html 页面上，这是因为这些 HTML 页面将从网络中的客户端访问。我正在考虑的问题是播放速度慢，因为对磁盘的读/写可能不快。

编辑#2

从以下答案获得输入后，我能够为图像制作动画。我现在面临的问题是显示率太小，因此出现波动。我知道这是硬盘读/写速度慢的问题。所以我想如果我可以将这些图像放入缓冲区，即：系统 RAM，并编写一个 html/js 代码来从 RAM 而不是磁盘访问图像，回放会快得多。有人可以向我发送示例代码，在 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>

查询

$(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);

这将继续为每过一秒的图像制作动画。

于 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 回答