Question

我创建了一个快速简单的插件，垂直对齐我在多个网站中成功使用的图像，虽然我现在正在使用新的CMS来自动调整图像大小，这会导致加载已调整大小的图像的延迟，从而导致插件为高度返回null。这仅在首次加载页面时发生。

我认为我可以通过超时来修复此问题，但这会导致parent.height始终返回null。

//Vertically Allign Images
jQuery.fn.vAlign = function() {
    return this.each(function(){
        setTimeout(function(){
            var $strip = jQuery(this);
            var ah = $strip.height();
            var ph = $strip.parent().height();
            alert('height = '+ah+' parent = '+ph);
            //height = 429 parent = null
            var mh = Math.ceil((ph-ah) / 2);
            $strip.css('margin-top', mh);
        },1000);
    });

};

Answer 1

在setTimeout函数中，this是window对象（setTimeout函数在全局范围内运行），因此$(this).parent()是一个空的jQuery对象（因为window没有父母。）

最好是使用JavaScript加载图像，以便分配load事件处理程序来执行垂直对齐，例如：

jQuery.fn.vAlign = function () {
    return this.bind('load', function () {
        // do alignment
    });
};

$('<img />')
    .vAlign() // call before assigning src
    .appendTo('body')
    .attr('src', '...');

Answer 2

我相信你在触发setTimeout时会丢失jQuery函数的上下文。尝试在全局范围内定义变量，然后调用setTimeout。

无论哪种方式，我认为这不是垂直对齐图像的最佳方式 - 您是否有理由使用JS而不是使用line-height或vertical-align CSS属性？

jQuery插件垂直对齐图像setTimeout

2 个答案: