用jquery重新加載多網絡攝像頭（jpg）IMG

剛纔聲明要玩Jquery和Java。我聲明要設置一個網頁，並使用jquery更新實時預覽圖像。嘗試谷歌周圍，但我無法找到一個「簡單」的解決方案重新加載sevral攝像機JPEG而無需重新加載完整的頁面。到目前爲止，我想出了這個和它的「工作」用jquery重新加載多網絡攝像頭（jpg）IMG

腳本部分

$(document).ready(function() { 
     setInterval('updateCamera()',2000); 
}); 

function updateCamera() { 
     $('#camera1').attr('src','camera1.jpg?' + Math.random()); 
     $('#camera2').attr('src','camera2.jpg?' + Math.random()); 
     }

HTML

<img id="camera1" src="camera1.jpg" border=1/> 
<img id="camera2" src="camera2.jpg" border=1/>

任何人誰得到了這樣一個更好的主意/解決方案？就像更新id元素一樣？對不起，如果問題是升技「新手」，但有一個更容易的解決方案。

來源

2010-09-07 Bulfen

我真的沒有看到這種方法有什麼問題，這實際上是我如何處理它。我唯一的建議是使用'new Date（）。getTime（）'而不是'Math.random（）'，但實際上它並不會真正起作用。 – joeynelson 2010-09-07 13:17:21

是的，如果它更新了很多次，我想用getTime會更好。 – Bulfen 2010-09-07 13:35:58

這是一個很好的，簡單的解決方案，如果它的工作，只需堅持下去。你可以把它更加動態的一點，如果你想：

function updateCamera() { 
    $('.cameras').each(function() { 
     var url = $(this).attr('src').split('?')[0]; 
     $(this).attr('src', url + '?' + Math.random()); 
    }) 
}

這樣，您就無需單獨指定每個圖片的，如果你只給他們同樣的類名。

來源

2010-09-07 13:17:29

我相信使用'this.src'就足夠了，所以你不要在這個過程中創建兩個新的jQuery對象 – 2010-09-07 13:24:45

謝謝Tatu。正是我在找的東西。 @Yi Juang。我會盡量和它一起玩。 :) – Bulfen 2010-09-07 13:30:26

測試和工作完美。 Thx的幫助！ :) – Bulfen 2010-09-07 13:56:35

這是另一個基於Tatu答案的變體，我剛在自己的網站上完成使用。它允許我將其他必需的參數傳遞給攝像頭。它也使用時間戳而不是隨機數。這只是感覺稍微清潔。

將您的原始圖片網址修改爲以「& t =」結尾，並確保您的圖片標籤屬於「相機」類。

<img class="cameras" src="http://kitchen/snapshot.cgi?user=guest&pwd=&t="> 


<script type="text/javascript">  

    function updateCamera() { 
    time = new Date().getTime(); 
    $('.cameras').each(function() { 
     var url = $(this).attr('src').replace(/&t=\d*/, '&s='+time); 
     $(this).attr('src', url); 
    }) 
    } 

    $(document).ready(function() { 
    setInterval('updateCamera()', 2000); 
    }); 

</script>

來源

2012-07-11 07:59:39 DonGar

用jquery重新加載多網絡攝像頭（jpg）IMG

回答

相關問題