Get a JQuery function to execute after and independently of onLoad

Question

Is is possible to execute a JQuery function by injecting it into the page? IT CAN'T be attached to the .ready function. The reason is that the user will be uploading an image via iframe. I need JCrop to execute after I display the uploaded image.

echo "<script>$('#pictures_step1_right_bottom1', window.parent.document).html('<img id=\"cropbox\" src=\"../../box/" . 'THM' . $filenameAlt . '.jpg' . "\">');</script>";

echo "<script>jQuery(function(){jQuery('#cropbox').Jcrop();});</script>";

This is executed in the iframe that is processing the image. it then sends it to the main page. This does not work however.

EDIT:

Ended up running a timer:

function checkPic() {  
    if($('#cropbox1').length != 0) {
        jQuery(function() {
            jQuery('#cropbox1').Jcrop();
        });
    }
    timer(); // Check size again after 1 second
}

function timer() {
    var myTimer = setTimeout('checkPic()', 3000); // Check size every 1 second}
}

Answer 1

Using javascript you can load an image and check when it has finished loading.

This is not JQuery but rather just normal JS but it's the same idea. With target being where the image is. The function will return true if it's done loading and false otherwise. Once it's true, run your JCrop method.

document.getElementById( target ).complete