Problema com plugin Jcrop e JavaScript Load Image

[mvspereiraz 1]

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
            );
        };

 

[William Bruno 1501]

carregue o jCrop assim q a imagem estiver pronta.