What is the proper way to solve this Jquery plugin issue?
<p>I have written a jquery plugin that is working pretty nicely but I am having a few cross browser issues, specifically when trying to get the height and width of an image element.</p>

<p>The following code does NOT pull the proper imgHeight in Chrome, it returns 0.   </p>

<pre><code> (function($){
        $.fn.sideLoad = function(data){
            //some variables we will need
            var imgHeight = $(this).children('img').height();
            var imgWidth = $(this).children('img').width();
            var loaderHeight = (imgHeight/2)-16 ;
            var loaderWidth = (imgWidth/2)-16;
            var $target = $(this);

            //do some other processing    
        };//end function    
    })(jQuery);
</code></pre>

<p>So, I understand that most likely what is going on is that I need to wait for the DOM to be ready to pull the proper height and width numbers. So if I change the code to what I have below, it works:</p>

<pre><code>$(document).ready(function(){
    $.fn.sideLoad = function(data){
            //some variables we will need
            var imgHeight = $(this).children('img').height();
            var imgWidth = $(this).children('img').width();
            var loaderHeight = (imgHeight/2)-16 ;
            var loaderWidth = (imgWidth/2)-16;
            var $target = $(this);

            //do some other processing    
        };//end function    
 });
</code></pre>

<p>But, I have never seen plugins written with document ready as part of it and I just don't think this is the best way to do it. Can someone explain the differences between my two code snippets here and what the best way to accomplish my goal is? Basically I need the proper dimensions of the image so that a loader graphic gets centered properly when the event is triggered.</p>
