0

我有一个网络摄像头，每隔几秒就会覆盖一次“pic.jpg”。我遇到的问题有时是我下面的代码在网络摄像头覆盖旧图像的确切时间执行，导致图像损坏。然后当函数再次运行时（在网络摄像头完成上传图像后）一切正常并显示图像。所以我试图阻止损坏的图像永远显示。我是 javascript/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 可以正常工作。

4

1 回答 1

1

更新

您应该使用这样的插件：https ://github.com/desandro/imagesloaded

它将正确检测图像源已加载并为您提供所需的功能。

以下不正确

看看这篇文章的答案：jQuery callback on img src replacement?

本质上，您可以为元素使用加载事件侦听器。

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

注意：请记住，当图像在浏览器缓存中时，load() 并不总是触发。您需要使用 DOM img.complete 添加一些逻辑。阅读 load() 文档页面上的评论以获得一些见解。（通过@MPD）。

于 2012-10-02T20:31:11.130 回答