javascript - Automatically loading a series of images sequentially in html

I have a html page that gets automatically refreshed every 1 ms. I did it using mata tag:

 <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>

Now my requirement is such that after every refresh I must load a new file. So in my folder I have files named: 0.bmp, 1.bmp, 2.bmp,... 1000.bmp, which will be loaded on the html file. i.e after every refresh a new file from the folder will be loaded. Basically the file name in

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

will change from 0.bmp to 1...1000.bmp and so on.

How can we do this in html i.e change the file name dynamically?

Edited #1:

I have just realized that my problem is basically of animation. So given 1000 images stored in hard disk, I have to play them one by one on an HTML page. This should be as fast as possible. The only requirement is it must be on html pages, this is because these HTML pages will be accessed from a client in a network. the problem that I am thinking is slow playback because read/write to the disk may not be fast.

Edited # 2

After getting inputs from following answers, I was able to animate the images. The issue right now I am facing is the display rate is too small, and so fluctuations are ing up. I understand this is a problem of slow read/write from hard disk. So I guess if I can put these images in buffer i.e: System RAM, and write a html/js code to access the images from the RAM instead of the disk, the play back will be much faster. Can someone send me a sample code to, write images in RAM and use html/js code to access these images from RAM?

Note: as per the policy of stackoverflow, I am updating my question as and when I am solving various steps of the original problem.

I have a html page that gets automatically refreshed every 1 ms. I did it using mata tag:

 <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>

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

will change from 0.bmp to 1...1000.bmp and so on.

How can we do this in html i.e change the file name dynamically?

Edited #1:

Edited # 2

Note: as per the policy of stackoverflow, I am updating my question as and when I am solving various steps of the original problem.

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked May 14, 2012 at 11:22 gpuguy 4,59518 gold badges74 silver badges131 bronze badges

1 Your gonna need javascript i would imagine – Undefined Commented May 14, 2012 at 11:23
I will appreciate if you could give me some hints or sample code for javascript. – gpuguy Commented May 14, 2012 at 11:26
1 As a practical matter no timer in Windows can tick as fast as 1ms. The fastest you would realistically see, depending on hardware is 12ms. After that is the fact that a browser will not be able to render a page in less than 1ms. So if the customer requires the browser refresh a page faster than 1 millisecond (i.e. 1000 frames per second): he's gonna have a bad time. Not even a DirectX powered media player can deliver 1000 frames per second. Finally, his monitor can only redraw every 16ms (i.e. 60 Hz). In short: your customer is a numb-skull who needs a smack. – Ian Boyd Commented May 14, 2012 at 13:18
I have updated my answer below based on your edit. Your edit is now an entirely different question. It is hard to tell if you actually have a requirement to refresh the page or your requirement is to animate some sequences of images without refreshing. – lucuma Commented May 14, 2012 at 15:49

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

What you are trying to do should not be done by refreshing continuously the web page, but by the use of Javascript.

Consider this method using JQUERY and setInterval():

See a working 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);
});

What's being done

Hide all images

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

Initialize an interval of 1 sec that will collect the first image, hide it, jump to the next image, show it, lastly move the previous image to the end.

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

This keeps on going animating the images every second that passes.

I am updating my answer based on a now different question.

You can use this plugin: https://code.google./p/jsmovie/ It does exactly what you want by animating a set of images.

Original Answer Below:

Although I'd agree with many of the other answers, it seems the OP needs to refresh the entire window instead of doing this via ajax without a page reload.

<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

});

The following fiddle demonstrates this though I dont' have a serial set of images so the jsfiddle is a little different in that it updates an index of already set images forked from a previous answer but it does demonstrate the page reload.

http://jsfiddle/smf9w/1/

DON'T, really DON'T do this!! Use JS instead. Use setInterval() and use a time span greater than 1m...

As others say, this is not the way to do it. But you can use cookie or localstorage on modern browsers.

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

Code above is just a sample.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Automatically loading a series of images sequentially in html - Stack Overflow

4 Answers 4

What's being done

与本文相关的文章

评论列表(0)