Problema com plugin Jcrop e JavaScript Load Image

Galera estou criando um sistema de upload de imagem onde ao usuario selecionar a foto é mostrado um preview usando o plugin https://github.com/blueimp/JavaScript-Load-Image e depois ele poderá recortar a imagem com o plugin jcrop.. Meu problema é q quando escolha imagem no input ele aparece o preview de boa.. mas o jcrop não é aplicado. Porém ele ta funcionando se eu colocar um imagem antes com o id do jcrop ele funciona.. acredito q isso acontece pq o preview está sendo mostrado depois do carregamento do jcrop.. como resolvo isso.. abaixo vai o codigo

// JCROP

 $(function(){
 $('#cropbox').Jcrop({
 aspectRatio: 1,
 onSelect: updateCoords
 });

 });

 function updateCoords(c)
 {
 $('#x').val(c.x);
 $('#y').val(c.y);
 $('#w').val(c.w);
 $('#h').val(c.h);
 };

 function checkCoords()
 {
 if (parseInt($('#w').val())) return true;
 alert('Selecione a região para recortar.');
 return false;
 };
 // PREVIEW IMAGEM
 //https://github.com/blueimp/JavaScript-Load-Image
 document.getElementById('inputFoto').onchange = function (e) {
 loadImage(
 e.target.files[0],
 function (img) {
 document.body.appendChild(img).setAttribute("id","cropbox");
 },
 {maxWidth: 200} // Options
 );
 };