Javascript 解决Jquery插件问题的正确方法是什么？

我已经编写了一个jquery插件，它工作得很好，但是我遇到了一些跨浏览器的问题，特别是在尝试获取图像元素的高度和宽度时

下面的代码没有在Chrome中显示正确的imgHeight，它返回0

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

因此，我知道最有可能发生的事情是，我需要等待DOM准备好提取适当的高度和宽度数字。因此，如果我将代码更改为下面的代码，它将起作用：

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

---

但是，我从来没有见过使用DocumentReady编写的插件作为它的一部分，我只是不认为这是最好的方法。有人能解释一下我的两段代码之间的区别吗？实现我的目标的最佳方法是什么？基本上，我需要图像的适当尺寸，以便在触发事件时加载程序图形正确居中。

只有在加载图像后才应调用sideLoad；这可能不是插件的责任。假设宽度和高度没有设置为attributes/CSS，那么图像也必须首先下载元数据，因此可能需要.load而不是.ready。不过，这会带来一些缓存问题。更好的办法是将图像的宽度和高度作为参数发送给插件吗？这不会带来太多不便，插件对我们的应用程序仍然有很大的价值。顺便说一句，我之前在$document.ready上调用插件，但仍然没有得到正确的高度和宽度。