Jquery - 只有在成功更新圖像源後才能運行函數

我有一個網絡攝像頭，每隔幾秒就會覆蓋「pic.jpg」。我遇到的問題有時候我的代碼會在網絡攝像機覆蓋舊圖像的確切時間內執行，導致圖像損壞。然後，當功能再次運行（攝像頭完成上傳圖像後），一切正常，圖像顯示。所以我正在試圖阻止從此不斷出現的破碎圖像。我是新來的JavaScript/jQuery的，所以這可能是錯在很多層面：Jquery - 只有在成功更新圖像源後才能運行函數

<style type="text/css"> 
#pictest {display:none} 
</style> 

function updateCams(){ 
    var camurl = "/pic.jpg?"+new Date().getTime(); 
    $("#pictest").attr("src", camurl); 
    $("#pictest").error(function(){ 
     /* image was being written. Restart the function and try again */ 
     updateCams; 
    }) 
    /* I want a success/valid type function to go here and update the visible image only on success*/ 
    $("#pictest").valid(function(){ 
     $("#pic").attr("src", camurl); 
    }) 
}; 
setInterval("updateCams()", 2000); 

<img src="pic.jpg" width="640" height="480" id="pic" alt="Loading..." /> 
<img src="pic.jpg" id="pictest" />

無論如何，「有效」功能不起作用。我試過有效/驗證/成功，甚至是一個if/else，但只有.error才正確。

來源

2012-10-02 Brandon

你見過這個[答]（http://stackoverflow.com/a/9589845/1408356）？ – Scrimothy

使用load事件，不要設置'src'，直到綁定了'.error'和'.load'之後 –

不知道我得到了這個，但是你試過這個 - > [FIDDLE]（http：/ /jsfiddle.net/hXKNJ/）???而且不要在你的時間間隔！ – adeneo

UPDATE

你應該使用插件像這樣：https://github.com/desandro/imagesloaded

將正確地檢測，圖像源被加載，給你你想要的功能。

下面是不正確

看看這個帖子的答案：jQuery callback on img src replacement?

本質上講，你可以使用負載事件偵聽器的元素。

$('#imageID').load(function() { .... });

注意：只要記住，load（）方法時，圖像瀏覽器緩存並不總是閃光。您需要使用DOM img.complete添加一些邏輯。閱讀load（）文檔頁面上的註釋以獲得一些見解。（通過@MPD）。

來源

2012-10-02 20:31:11 seangates

如果在設置源之前綁定事件，則無論緩存如何，事件總是會適當地觸發。 –

Jquery - 只有在成功更新圖像源後才能運行函數

回答

相關問題