Плагин jQuery вертикальное выравнивание изображений setTimeout

Question

Я создал быстрый и простой плагин, который выравнивает по вертикали изображения, которые я успешно использовал на ряде веб-сайтов, хотя сейчас я работаю с новой CMS, которая автоматически изменяет размеры изображений, что создает задержку при загрузке изображений с измененным размером, что вызывает плагин, чтобы вернуть ноль для высоты. Это происходит только при первой загрузке страницы.

Я думал, что смогу исправить это с тайм-аутом, хотя это заставит parent.height всегда возвращать ноль.

//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

Я полагаю, что вы теряете контекст функции jQuery при запуске setTimeout.Попробуйте определить свои переменные в глобальной области видимости и затем вызвать setTimeout.

. В любом случае, мне не кажется, что это лучший способ для вертикального выравнивания изображений - есть ли причина, по которой вы это делаетеэто с JS, а не с использованием line-height или vertical-align свойств CSS?