How to ensure a DOM object has rendered before calling a function on it?

问题

I'm using a jquery plugin (jcrop) which has one of its options set by the the value of a DOM element.

jQuery(function($){
  var CircleSel = function(){ };
  CircleSel.prototype = new $.Jcrop.component.Selection();
  $.extend(CircleSel.prototype,{
    zoomscale: $('#img_container').data('zoomscale'),
    # more stuff......

The problem is that '#img_container' is only created by jcrop once the page has loaded, and so zoomscale is being set to null. I can't think of any other way to get this value — I need the #img_container's zoomscale, which is calculated from the width, to ensure crops are correctly positioned from the original image.

I guess I need to either delay the CircleSel function, or enforce a strict order to ensure rendering of #img_container completes before CircleSel is run.

This is stretching my limited javascript knowledge, but I'd like to learn how to approach this with jquery/ javascript. Appreciate any advice or pointers to the necessary functions or examples.

来源：https://stackoverflow.com/questions/36218979/how-to-ensure-a-dom-object-has-rendered-before-calling-a-function-on-it