0

画像を非同期でアップロードできるインターフェースに取り組んでおり、プロセスは期待どおりに機能しています。このプロセスは、画像をさまざまなサイズにサイズ変更してクラウドに保存するバックエンドプロセスに画像を送信します。URLを生成すると、最終的に画像が適切なサイズにアップロードされます（通常は10秒未満）。

画像がアップロードされた後、その画像のサムネイルはインターフェイスに表示されません。これは、画像のサイズがまだ変更されていないためです。

私がやりたいのは、画像を作成し、サイズ変更のためにバックエンドサービスに送信した後、各アップロードの試行に接続されたクライアント上のプロセス（setintervalを使用することを考えています）を探し続けることです解決するまでその画像を表示し、解決したら、サムネイルプレースホルダーをその画像で更新します。

リクエストによって画像が解決されたら、それをフィードしてインターフェースを更新するにはどうすればよいですか？

4

2 に答える 2

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 に答える
0

そこに画像がないと判断する方法 (404 エラー、URL を含む JSON を返す API など) によっては、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 に答える