在图像交换后，将垂直居中应用于不同尺寸的图像

Question

我目前正在使用此脚本在单个文件夹中循环显示图像。

$(function(){
  $(".img-swap").on('click', function() {
    var self = this,
        file = this.src,
        common = file.substring(0, file.length-6)
        currentId =  +file.substr(-6,2),
        id = ('0' + (currentId+1)).substr(-2),
        nextimage = new Image();

    nextimage.onload = function(){
      // image was preloaded so it exists
      var img = this;
      $(self).fadeOut('slow', function(){self.src = img.src; $(self).fadeIn(300)});
    };
    nextimage.onerror = function(){
      // error occured while preloading. we assume image does not exist
      $(self).fadeOut('slow', function(){self.src = common+ '01.jpg'; $(self).fadeIn(300)});
    };
    nextimage.src = common + id + '.jpg';
  });
});

问题如下：图像具有所有基于百分比的大小，并且使用此脚本在容器中垂直对齐：

 $(window).resize(function(){
  $( ".vertical").each(function() {
    $(this).css({
      position:'relative',
      marginTop: ($(this).parent().outerHeight() 
                  - ($(this).outerHeight()+15))/2
    });
  });
});

$(window).load(function() {
  $( ".vertical").each(function() {
    $(this).css({
      position:'relative',
      marginTop: ($(this).parent().outerHeight() 
                  - ($(this).outerHeight()+15))/2
    });
  });
});

现在：如果新加载的图像与初始图像的高度不同，则垂直边距不会使图像居中，因为它会使用初始图像的高度，直到我调整窗口大小。

是否有可能在不调整窗口大小的情况下将边距顶部应用于每个新加载的图像？

以下是测试版网站：http://www.zeiteffekt.de/relaunch

非常感谢每一位帮助。