json이 응답 한 후 이미지로드

Question

json이 응답 한 후 이미지를로드하려면 어떻게해야합니까?

jQuery를

$.post('@Url.Action("Upload", "Camera")', { 
    type: 'data', 
    image: canvas.toDataURL("image/png") 
}, function (result) { 
    if(result.success) { 
    alert('The image was successfully sent to the server for processing'); 

    var $image = $("<img src='~/temp/" + @ViewData["CaputredImage"] + "'/>"); 
    $image.live("load", function() { 
     $("#imageContainer").append(this); 
    }); 

    } 
}); 

이미지 컨테이너

<div id="imageContainer"></div> 

Answer 1

내가 JSON에서 새로 제출 된 이미지의 경로는 다음 서버에서 다시 전송 및 포함 아마도 것입니다 :

$.post('@Url.Action("Upload", "Camera")', { 
    type: 'data', 
    image: canvas.toDataURL("image/png") 
}, function (result) { 
    if(result.success) { 
    alert('The image was successfully sent to the server for processing'); 

    // *** Change is on next line *** 
    var $image = $("<img src='" + result.imagePath + "'/>"); 
    // *** Another change on the next line *** 
    $image.on("load", function() { 
     $("#imageContainer").append(this); 
    }); 

    } 
}); 

참고 live 전화 번호를 on으로 변경했습니다. 그것은 처음에는 live을 사용하는 올바른 방법이 아니었고, 두 번째로 잠시 사용이 중단되어 이제는 실제로 제거되었습니다. (이 경우, 문제는 원인이 실제로 매우 확률이 낮다 하나에 있지만)

별도로, 당신은 거기 경쟁 조건이있다 : 당신은 후 때까지 이미지의 load 이벤트 후킹되지 않은 사용자가 지정한 그 src. 브라우저에서 JavaScript가 단일 스레드인데 (웹 작업자를 사용하지 않는 한) 브라우저은 이 아니며이 아닙니다. 이미 캐시에 이미지가있는 경우 (이 경우 다시는 발생하지 않음) load 이벤트를 실행하고   —을 처리하고 이벤트에 핸들러가없는 것을보고 JavaScript가 실행될 때 대기열에 대기열을 두지 않습니다 다음 유휴.

(다른 극단에서) 또한 이미지가로드 될 때까지 이미지를 문서에 추가하려고 기다리고 있습니다. 어떤 문서에도 없다면 모든 브라우저가 이미지를로드 할 것이라고 확신하지는 않습니다. 그것은 가치가 무엇인지에 대한 그래서

: 페이지 떨어져 있지만 문서에 img 요소를 생성 이미지로드 후크

는

$.post('@Url.Action("Upload", "Camera")', { 
    type: 'data', 
    image: canvas.toDataURL("image/png") 
}, function (result) { 
    if(result.success) { 
    alert('The image was successfully sent to the server for processing'); 

    // *** Changes start here *** 
    var $image = $("<img>"); 
    $image.css({ 
     position: "absolute", 
     left: -10000, 
     top: 0 
    }); 
    $image.attr("src", image.imagePath); 
    $image.appendTo(document.body); 
    $image.on("load", function() { 
     $image.remove(); 
     $("#imageContainer").append("<img src='" + result.imagePath + "'>"); 
    }); 
    // *** End of changes *** 
    } 
}); 

의 src을 설정하고, 부하에 상품이 새로 찬성 img 요소 CSS가 적용되지 않은 CSS가 생성되었습니다. (해당 통화를 하나로 묶어 구분할 수 있습니다.)

Answer 2

var img = new Image(); 
img.onload = function() { 
    $("#imageContainer").append(img); 
}); 
img.src ='~/temp/' + @ViewData["CaputredImage"] ;