发表新帖
发表新帖

Updating a picture without page reload

前端 未结
关注
6 2018
广开言路
广开言路 2020-12-16 20:41

How would I go about updating an image that gets updated on a server every couple of seconds with out the user having to hit the refresh button, my first guess was ajax but

相关标签:
6条回答
  • 闹比i
    2020-12-16 21:11

    No AJAX is necessary, just update the image's src property. But, since it has the same url, you have to give the browser a unique address to ensure you don't just load the old image from the browser's cache. You can guarantee a unique image by getting the current date's serial number via new Date().valueOf() and appending that to the url as a querystring.

    $("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

    You can also use new Date().getTime() to get the serial number, or just coerce the date to a number: +new Date()

    To do it on a timer use setInterval(). This would be the complete code that you could just drop inside a script tag in your page's <head>:

    $(function() {
   var intervalMS = 5000; // 5 seconds
   setInterval(function() {
      $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
   }, intervalMS);
});
    0 讨论(0)
  • 逝去的感伤
    2020-12-16 21:18

    Do something like

    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

    This changes the src attribute of your image tag (with id "yourimage") and adds a random query string to it, forcing the browser to reload the image each time you change it.

    To reload the image every 5 seconds, do something like:

    window.setInterval(function()
{
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);
    0 讨论(0)
  • 春和景丽
    2020-12-16 21:22

    just use javascript to update the src property of the img.

    HTML: 

    <img src="..." id="myImage" />

    JS: 

    document.getElementById("myImage").src = "http://....";

    If you want it on a timer, do something like this: 

    setInterval(function() { ... }, 4000);

    If you have an issue with caching, add a random query string to the end of the url: "?rnd=randomNumberHere"

    0 讨论(0)
  • 情歌与酒
    2020-12-16 21:24

    every X seconds send Ajax to server. if link of image from response == previous, no update, if link new: $('img.class').attr('src','link');

    0 讨论(0)
  • 温柔的废话
    2020-12-16 21:30

    Adding a time span to the end of the image URL worked for me.

    var imagePath = "http://localhost/dynamicimage.ashx";

    $("#imgImage").attr("img", imagePath + &ts" + (new Date()),toString() );

    0 讨论(0)
  • 感动是毒
    2020-12-16 21:31

    It seems there is something wrong with your Perl script. Trying to access the image by the URL should return an image anyway. It should return binary data and not a script. You should also set the Content-type header of the response to image/gif. Verify if it indeed returns binary data before trying to fix your JavaScript code.

    0 讨论(0)
 看不清?
提交回复
热议问题