javascript - 使用 FTP jquery 上传图片 检查图片是否加载

Question

我一直在寻找解决问题的方法，但还没有找到我想要的东西。

好吧，我有一个网页，其中每 5 秒从网络摄像头拍摄一次“实时图像”，我使用 FTP 上传图像并用新图像替换旧图像。我的问题是，有时 FTP 在传输过程中并且图像被截断，所以我想说如果图像是加载显示，如果不是不“刷新”图像。这是我的代码：

setInterval(function(){
   $("#imagerefresh").attr("src", "images/image_1.jpg?"+new Date().getTime()).load();
},5000);

我发现很多帖子，他们询问如何检查图像是否已加载，并尝试了它们，但它们只执行一次，就像这个：

setInterval(function(){
   $("#imagerefresh").load(function(){
      $("#imagerefresh").attr("src", "images/image_1.jpg?"+new Date().getTime());
   })
 },5000);

Answer 1

试试这个：

setInterval(function() {
    $("#imagerefresh").load(function() {
        console.log("image loaded correctly");
    }).error(function() {
        console.log("error loading image");
        $(this).unbind("error").attr("src", $(this).attr("src"));
    }).attr("src", "images/image_1.jpg?" + new Date().getTime());
})
}, 5000);​

Answer 2

使用来自 jQuery 的错误事件可能会起作用，所以像这样：

function load() {

    $("#imagerefresh").attr("src", "images/image_1.jpg?"+new Date().getTime());

    $("#imagerefresh").error(function(){
        load();
    }).load(function(){
        setInterval(load(), 5000);
    });

}