使用PHP和JavaScript每秒更改一次圖像

Question

我有一個用JavaScript編寫的小腳本，用於每秒更改圖片。 問題是圖像未更改。

每秒將要顯示的圖像文件將被新數據覆蓋。

在網頁上顯示第一個圖像可以正常工作，但是獲取所有后續圖像均不起作用，始終顯示相同的圖片。

jQuery代碼包含時間擴展，以強制瀏覽器每次重新加載新圖像並且不從緩存中獲取該圖像。

您可以看到用於圖像加載的JQuery代碼。

<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" />';
?>

在圖片上，您可以看到網絡流量。

所以我的問題是：如何每秒顯示不同的圖片？

謝謝

Answer 1

ajax方法：

可能需要在標頭中指定不同的content-type。

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

圖像名稱可能完全相同，因此不會得到新的圖像名稱。 嘗試為圖像添加時間戳：

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

此答案假設結果是圖像srcs。

您是否嘗試過更改src而不是加載？

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

Answer 2

這里的問題似乎是您要返回的是html文檔，而不只是要更改的圖像。 HTML在源代碼中具有一個硬編碼的image.jpg ，由於這不會改變，因此會從緩存中將其提取。

您需要做的是更改該圖像源以獲取最新圖像，而不更新其周圍的整個html代碼片段。

另一種選擇是使php將時間戳附加到html。