0

我正在开发一个允许异步上传图像的界面，并且该过程按预期工作。该进程将图像提交给后端进程，该进程管理将图像调整为不同大小并将它们存储在云中。我生成 url，最终图像被上传（通常在 10 秒内）到适当的调整大小。

图片上传后，界面中没有显示该图片的缩略图，很明显，因为它还没有调整大小。

我想做的是，在创建图像并提交给后端服务以调整大小之后，客户端上的一个进程附加到每个上传尝试（我正在考虑使用 setinterval ）以继续寻找该图像直到它解决，一旦解决，使用该图像更新缩略图占位符。

一旦图像确实按请求解析，我如何提供它来更新界面？

4

2 回答 2

0

根据您确定那里没有图像的方式（404 错误，某种 API 返回带有 URL 的 JSON？），您可以使用 jQuery.ajax() 根据 HTTP 状态代码很容易地采取行动。

function waitforimage(imageURL) {
    $.ajax(url, { 
        statusCode: {
            // on 404 wait and do it again later
            404: function() {
                setTimeout(function(){
                    waitforimage(imageURL);
                }, 3000);
            },
            // on success, load the image
            200: function() {
                loadimage(imageURL);
            }
        }
    });
}

function loadimage(imageURL) {
     $('#myimageID').attr('src', imageURL);
}

当然，你可以不使用 jQuery 来完成它，但是要让它工作起来会更麻烦。

于 2013-03-05T17:56:11.627 回答
0

使用setTimeout,onerror和onload事件的纯 JavaScript ：

var img,
    attempt = 2;

checkForImage("https://ssl.gstatic.com/apps/cpanel/resources/img/apps_logo_new.png3",
             document.getElementById("message"));

function checkForImage(location, loadto) {    
    img = document.createElement("img")

    img.onerror = function () {
        setTimeout(function() {
            checkForImage(location, loadto);
            loadto.innerText = "Finding Picture... Attempt: " + attempt++;
        }, 5000); 
    }

    img.src = location;

    img.onload = function () {
        loadto.innerHTML = "<img src='" + location + "' />";
    }
}

删除链接3末尾的image将显示一个成功的示例。

于 2013-03-05T18:19:10.123 回答