$(document).ready() doesn't seem to work properly with user control

Question

I have made a user control, and placed some code in the $(document).ready() method, but when I place breakpoints, by the boxWidth value, and step through, I can visibly see that the html has not yet loaded, and that is why I am getting undefined values. I need the html to load first, so that I can get the width and height of an img element to calculate aspect rations etc.

A screen shot is given below:

Answer 1

You simply haven't declared those variables anywhere. Try this:

var elem = $("#Body_Body_ucImageUploadAndCrop_CropImage"),
    boxWidth = elem.width(),
    boxHeight = elem.height();

elem.Jcrop({
    onSelect: storeCoords,
    boxWidth: boxWidth,
    boxHeight: boxHeight,
    aspectRatio: boxWidth / boxHeight
});

Now that your code runs error free, you might wanna access the image only after it's loaded:

$(window).on( "load", function() {
    //Code to run after window has loaded
});

Should do it.

Answer 2

您将在寻找资源加载事件

$.load("image_id", function(){ ... });