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 - 只有在成功更新图像源后才能运行函数

回答

相关问题