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

如果我错了，请纠正我：

使用AJAX Upload的图片上传表单允许用户将图片上传到您的服务器上。
AJAX Upload使用新上传图片的URI调用onComplete回调。
您创建了一个新的img DOM元素，src设置为上传图片的URI。
img DOM元素已添加到文档中。
showhide在img元素上调用。

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

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

src

jQuery插件的问题

1 个答案: