Question

我有一个网络摄像头，每隔几秒就覆盖一次“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正常工作。

Answer 1

<强>更新

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

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

以下是不正确的

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

基本上，您可以为元素使用load事件侦听器。

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

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

Jquery - 仅在成功更新图像源后运行函数

1 个答案: