在javascript中動態改變圖像

我要顯示這樣的動態改變的圖像效果： http://dotsignals.org/google_popup.php?cid=202 （如果該網頁無法顯示變幻的圖像，單擊任一攝像機在http://dotsignals.org）

我已經研究過的代碼，有一些問題：

1.網站使用setImage和refreshSetImage初始化和刷新圖像的動態變化效果。 Math.random在這裏有什麼用處？我知道這是一種在不同時間區分圖像的方法。但它是如何工作的？後端如何迴應？

2.與第一個問題相關。 refreshSetImage的機制是什麼？我沒有看到從服務器請求數據的任何跡象。它是否發送「GET」？它如何刷新圖像？

function setImage(imageID){ 
    var currentImage = imageID; 
    document.getElementById(currentImage).src ='http://207.251.86.238/cctv9.jpg'+'?math='; 

    refreshSetImage(); 
} 
function refreshSetImage() { 

    document.images["myCam"].src = 'http://207.251.86.238/cctv9.jpg'+'?math='+Math.random(); 
    setTimeout('refreshSetImage()',1000); 
} 
function ScaleSize(imageID) { 
    var elem = document.getElementById(imageID); 
    elem.style.width = 500; 
    elem.style.height = 300; 
}

3.如何設計後端？ 4.現在我想在我自己的項目中使用這兩個函數。我想在setImage和refreshSetImage函數中添加camID的參數，因此圖像的src將更改爲類似於：。 camID是標識不同相機的字符串。我將其更改爲：

function refreshSetImage(camID) { 

    document.images["myCam"].src = 'http://207.251.86.238/'+camID+'.jpg'+'?math='+Math.random(); 
    setTimeout('refreshSetImage(camID)',1000); 
} 

function setImage(imageID,camID){ 
    var currentImage = imageID; 
    document.getElementById(currentImage).src = 'http://207.251.86.238/'+camID+'.jpg'+'?math='; 

    refreshSetImage(camID); 
}

並且出現錯誤：Uncaught ReferenceError: camID is not defined VM132:1。圖像也沒有變化。我不知道是什麼問題。什麼是VM132:1？

感謝

來源

2016-03-03 Keying

的的Math.random是確保你請求圖像是不是從高速緩存。您添加一個「唯一」的關鍵字以確保瀏覽器實際嘗試獲取新圖像。如何設計後端：好問題...問原始開發者.. 如果你想製作自己的後端..也可以問問他們：這可能是他們限制訪問他們的視頻循環，並且*可能是爲什麼你得到一個錯誤（但這只是一個猜測（ – Leon

http://207.251.86.238/cctv9.jpg?time=1 http://207.251.86.238/cctv9.jpg?time=2 params時間或數學，如果重新加載圖像..並在你的問題，沒有定義camid是一個錯誤，當你沒有在你的變量中賦值 – Cuchu

我通過定期從後端請求數據使用JQuery get（） – Keying

-1

檢查

function refreshSetImage(imageID,camID) { 
    currentImage = imageID; 
    url = 'http://207.251.86.238/'+camID+'.jpg'+'?math='+Math.random(); 
    //document.getElementById(currentImage).src= url; 
    console.log(url); 
} 

$(document).ready(function(){ 

imageID = "imageID"; 
camID = "camID"; 

setInterval(function() { 
    refreshSetImage("imageID","camID"); 
}, 3000); 


});

https://jsfiddle.net/Cuchu/vr1ftwg1/

來源

2016-03-03 21:55:46 Cuchu

所做的只是將原始（'+ camID +'）'，1000）; add（'+ camID +'） –

setInterval（'refreshSetImage（'+ camID +'）'，1000）他們將失去重新）（https://jsfiddle.net/91cy1puf/）你最後的選擇幾乎是正確的。如果他們使用函數引用而不是字符串來設置'setInterval'，那麼它就會工作。無論如何，使用帶有'setInterval'和'setTimeout'的字符串是一個好主意。沒有理由不使用普通的舊功能。 – Cuchu

它仍然是錯誤的。[編輯] [編輯]代碼然後應用'setInterval'而不是'setTimeout'。這不會改變任何東西。 –

在javascript中動態改變圖像

回答

相關問題