更新沒有頁面刷新的圖片

我該如何去更新一個圖像，每隔幾秒在服務器上更新圖像，用戶不得不點擊刷新按鈕，我的第一個猜測是ajax，但我沒有真正工作與之前。有人能指出我正確的方向嗎？更新沒有頁面刷新的圖片

編輯：忘了提，該圖像是由Perl腳本生成一個.gif - 試圖通過URL來抓住它返回一個腳本

2011-06-28 Mehran

你說」試圖通過url抓取它返回一個腳本「，但你暗示你可以重新加載通過刷新頁面的圖像，所以必須有一個URL來獲取圖像，請問你編輯你的問題，以包含你在查看源代碼時發現的img標籤的html？ – gilly3

@ gilly3沒有頁面源代碼整個頁面只是一個由perl腳本生成的圖像，因此沒有img標籤，也沒有html。我想要將該圖像放入網頁並刷新它以更新從該圖像生成的圖像perl腳本 – Mehran

看來你的Perl腳本有什麼問題。試圖通過URL訪問圖片應該會返回一個圖片。它應該返回二進制數據而不是腳本。您還應該將響應的Content-type標頭設置爲image/gif。在嘗試修正JavaScript代碼之前，驗證它是否確實返回二進制數據。

來源

2011-06-28 16:55:56 fromvega

非常感謝你這是劇本。 – Mehran

只是使用JavaScript來更新IMG的src屬性。

HTML：

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

JS：

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

如果你想要一個計時器，做這樣的事情：

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

如果你有一個問題與緩存，將隨機查詢字符串添加到url的末尾：「？rnd = randomNumberHere」

來源

2011-06-28 16:44:02 Steve

這樣做

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

這會改變你的形象標籤的src屬性（ID爲「yourimage」），並增加了一個隨機的查詢字符串給它，迫使瀏覽器每次你改變它的時間來重新加載圖像。

要重新加載圖像每隔5秒，做這樣的事情：

 
window.setInterval(function() 
{ 
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime(); 
}, 5000);

來源

2011-06-28 16:44:58

每X秒發送Ajax的服務器。如果從響應圖像的鏈接==上一個，沒有更新，如果鏈接新：$('img.class').attr('src','link');

來源

2011-06-28 16:47:18 bravedick

沒有AJAX是必要的，只需更新圖像的src屬性。但是，由於它具有相同的網址，因此您必須爲瀏覽器提供唯一的地址，以確保您不會從瀏覽器的緩存中加載舊圖像。您可以通過new Date().valueOf()獲取當前日期的序列號並將其附加到URL作爲查詢字符串來保證唯一的圖像。

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

您還可以使用new Date().getTime()獲得的序列號，或者只是強迫日期到一個數字：+new Date()

要做到這一點對一個定時器使用setInterval()。這將是完整的代碼，你可以只刪除一個腳本標籤中在你的頁面的<head>：

$(function() { 
    var intervalMS = 5000; // 5 seconds 
    setInterval(function() { 
     $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date()); 
    }, intervalMS); 
});

來源

2011-06-28 16:57:16 gilly3

添加的時間跨度，以URL爲我工作了圖像的結束。

var imagePath =「http://localhost/dynamicimage.ashx」;

$（「＃imgImage」）。attr（「img」，imagePath + & ts「+（new Date（）），toString（））;

來源

2016-11-30 06:21:40

更新沒有頁面刷新的圖片

回答

相關問題