Question

我有一个html页面，每1 ms自动刷新一次。我是用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的策略，当我解决原始问题的各个步骤时，我正在更新我的问题。

Answer 1

不应该通过连续刷新网页，而是通过使用Javascript来完成您要做的事情。

使用JQUERY和setInterval()来考虑此方法：

查看有效的Fiddle Example!

<强> 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);

每隔一秒就会继续为图像制作动画。

Answer 2

不要，真的不要这样做!! 请改用JS。使用setInterval()并使用大于1米的时间跨度......

Answer 3

我正在根据一个现在不同的问题更新我的答案。

你可以使用这个插件：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/

Answer 4

正如其他人所说，这不是实现目标的方式。但是你可以在现代浏览器上使用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);

上面的代码只是一个示例。

在html中按顺序自动加载一系列图像

4 个答案:

正在做什么