jQuery插件的问题

Question

我已经做了一个jQuery插件，但它不能正常工作。结果不一致。有时确实有效，但有时不行。我认为问题可能是有些变量加载不够快。

希望有人能帮忙。提前谢谢。

(function($) {

    $.fn.showhide = function(options) {

        var defaults = {
                appear: true,
                speed: 500
            },
            settings = $.extend({}, defaults, options);

        this.each(function() {

            var $this = $(this),
                elementWidth = $this.width(),
                elementHeight = $this.height(),
                newWidth = 0,
                newHeight = 0,
                marginX = Math.floor(elementWidth / 2),
                marginY = Math.floor(elementHeight/ 2);

            if(settings.appear) {

                console.log(elementWidth + ' ' + elementHeight + ' ' + marginX + ' ' + marginY);

                $this.css({ width: newWidth + 'px', height: newHeight + 'px', margin: marginY + 'px ' + marginX + 'px' });
                $this.animate({ width: elementWidth + 'px', height: elementHeight + 'px', margin: '0px', opacity: 'show' }, settings.speed);

            } else {



            }

        });

        return this;

    }

})(jQuery);

编辑

这个插件是用于我的图像上传器。当我上传一个图片时，它应该以一种奇特的方式出现。我使用这个插件上传: valums.com/ajax-upload和onComplete，我使用我的插件来显示图像。

Answer 1

如果我错了，请纠正我：

1. 使用AJAX上传的图像上传表单允许用户将图像上载到服务器上。
2. AJAX上载使用新上传的映像的URI调用onComplete回调。
3. 创建一个新的img DOM元素，将src设置为上传图像的URI。
4. 将img DOM元素添加到文档中。
5. 在showhide元素上调用img。

如果这是正确的，那么它解释了为什么elementWidth和elementHeight有时是不正确的。问题是浏览器需要时间来下载图像，而elementWidth和elementHeight在图像完全加载之前是无效的。

要解决此问题，我将尝试在设置showhide属性之前在img上注册的load回调中调用src：

var     $myNewImage = $('<li><img alt="" /></li>'),
        $i = $myNewImage.children('img');

$i.hide();
$myNewImage.rightClick(function(e) {
        // ....
});

$myNewImage.prependTo('.uploadedImages');
$('.uploadedImages li').each(function() {
        var indexNumber = $(this).index();
        $(this).children('img').attr('id', 'image_' + indexNumber);
});

$i.load(function() {
        $i.showhide({ appear: true });
});
$i.attr('src', 'uploads/thumbs/' + file);