Question

我正在异步更新文件系统中的图像。当用户点击“上传”时他们上传并替换名为＆＃34; image.jpg＆＃34;的图像。该文件将在后端更新1到90秒。如何检查前端使用javascript完成更新的时间？

$('#square_image_upload_button').click(function(e){
  $(".image").attr('src', "/images/loading.gif" );
  setTimeout(function () {
    var image_url =  '/image.jpg' + "?" + new Date().getTime();
    $(".image").attr('src', image_url );
  }, 30000);
});

实施例。以下代码仅在上载需要30秒或更短时间时有效。如果上传时间超过30秒，则降低setTimeout功能的时间可能无法显示图像。用循环更新图像会删除加载的gif。

Answer 1

如果图片要上传404（或其他一些错误），如果图片尚未上传或存在，则最简单的方法是添加load和{{1事件对你的形象。如果它触发error事件，您就知道它很好。如果它触发了load事件，那就不好了，您应该稍后再检查。

我实际上会使用新图片而不是您向最终用户显示的图片。加载完毕后，请将该网址输出给最终用户。

这样的事情：

error

这应该做的是在第一次超时触发后（30秒内），它会尝试检查图像。如果图片已加载，则会调用回调，然后将其设置为您的前端图片。

如果错误，它还没有准备好，所以它会等待10秒再试一次。然后它会每隔10秒继续一次，直到它最终运行，然后它会调用你的回调。

Answer 2

我们尝试加载图片。如果失败了，我们再试一次。您可以为整个过程设置粗略的“超时”。

$('#square_image_upload_button').click(function(e){
  $(".image").attr('src', "/images/loading.gif" );

  loadImage($(".image"), '/image.jpg', 30000);
});

function loadImage($el, url, timeout) {
    if (timeout <= 0) return;

    $el.one('error', function() {
        const wait = 1000;

        setTimeout(function() {
            loadImage($el, url, timeout - wait);
        }, wait);
    });

    $el.attr('src', url + '?cache=' + Date.now());
}

正如我最初评论的那样，您可以考虑修改服务器端代码，而不是重复请求图像。

使用javascript检查后端更新图像的时间

2 个答案: