每秒使用PHP和JavaScript更改图像 [英] Change image every second using PHP and JavaScript

问题描述

我有一个用JavaScript编写的小脚本，每秒用于更改图片。问题是图像没有被改变。

使用新数据，每秒钟将显示图像文件。

在网页上显示第一张图片效果不错，但是所有后续图片都不起作用，总是显示相同的图片。

JQuery代码包含时间扩展，以强制浏览器每次重新载入新图像，而不是从缓存中取出。

您可以看到用于图像加载的JQuery代码。 / p>

 < script type =text / javascript> 
 var auto_refresh = setInterval（function（）{
 $（'＃image'）。load（'camera_stream_worker.php？time ='+ Date.now（））;} 
，1000 ）; 
< / script> 
  

这是工作文件的返回：

 <？php 
 echo'< img src =/ RAMdisk / image.jpg/>'; 
？> 
  

在图片上，您可以看到网络流量。

所以我的问题是：我如何每秒显示不同的图片？

感谢

解决方案

ajax方法：

可能需要在标题中指定不同的内容类型。

  $。ajax（{method：'get'，url：'camera_stream_worker.php？time ='+ Date.now（））}）。success函数（data）{$（'＃image'）。html（data）;}） 

可能是因为图像名称完全相同，因此它没有得到新的图像。尝试为图片添加时间戳：

 <？php 
 echo'< img src =/的RAMdisk / image.jpg的< TIMESTAMPHERE>中/>; 
？> 
  

这个答案假定结果是图片src。

您是否尝试更改src而不是加载？

 < script type =text / javascript> 
 var auto_refresh = setInterval（function（）{
 $（'＃image'）。attr（'src'，'camera_stream_worker.php？time ='+ Date.now（））;} 
，1000）; 
< / script> 
  

I have a small script written in JavaScript that is used to change picture every second. The problem is that image is not being changed.

The image file that shuld be displayed is overwritten every second, with the new data.

Displaying the first image on the webpage works fine, but getting all of the subsequent images does not work, always the same picture is displayed.

JQuery code contains time extension to force the browser to reload new image every time and to not take it from the cache.

You can see the JQuery code for image loading.

<script type="text/javascript">
    var auto_refresh = setInterval(function (){
            $('#image').load('camera_stream_worker.php?time=' + Date.now());}
    , 1000);
</script>

This is the return of the worker file:

<?php
  echo '<img src="/RAMdisk/image.jpg" />';
?>

On the picture ou can see the network traffic.

So my question is: how can I display different picture every second?

thanks

解决方案

ajax method:

may need to specify different content-type in the header.

$.ajax({
  method: 'get',
  url: 'camera_stream_worker.php?time=' + Date.now()) 
}).success(function(data) {
  $('#image').html(data);
})

Could be that the image names are all the same, therefore it doesn't get new ones. try to add a timestamp to your images:

<?php
  echo '<img src="/RAMdisk/image.jpg?<TIMESTAMPHERE>" />';
?>

this answer assumes the result were image srcs.

have you tried changing the src instead of load?

<script type="text/javascript">
    var auto_refresh = setInterval(function (){
            $('#image').attr('src', 'camera_stream_worker.php?time=' + Date.now());}
    , 1000);
</script>

这篇关于每秒使用PHP和JavaScript更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！