jQuery: сохраняйте адаптивный размер div для контейнера изображений перед исчезновением

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

HTML:

<header id="masthead" class="site-header" role="banner">
  <div class="randomheader">
    <div class="image"><img src="" /></div>
    <span class="caption"></span>
  </div>

  <nav id="site-navigation" class="main-navigation" role="navigation">
    nav here
  </nav>
</header>

CSS:

.randomheader .image {
  position: relative;
  height: 0;

  /* 
  This percentage needs to be calculated
  using the aspect ratio of your image.
  Type your image width and height in this tool
  to get the aspect ration of your image:
  http://andrew.hedges.name/experiments/aspect_ratio/

  In this example the Google logo was 55:19 and 
  to get the percentage you divide 19 by 55 = 0.3454
  */
  padding-bottom: 34.54%;
}

.randomheader img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}

.randomheader .caption {
  display: block;
  min-height: 1em;
}

.randomheader img,
.randomheader .caption {
  opacity: 0;
}

jQuery:

(function($) {

  $.fn.extend({

    randomImage: function(config) {
      var defaults = {},
          config = $.extend({}, defaults, config); 

      return this.each(function() {
        var randNum = Math.floor(Math.random()*config.myImages.length),
            image = config.myImages[randNum],
            caption = config.myCaptions[randNum],
            path = config.path + image,
            $container = $(this),
            $image = $container.find('img'),
            $caption = $container.find('.caption');

        // preload image before adding 
        // to DOM and fading it in
        $image.attr({
          src: path,
          alt: image
        }).load(function() {
          $caption.html(caption);
          $image.add($caption).animate({ opacity: 1 }, 'slow');
        });
      });
    }

  });

}(jQuery));

// on DOM ready, 
// start 'er up
jQuery(function($) {
  $('.randomheader').randomImage({
    myImages: ['logo4w.png'],
    myCaptions: ['Google logo'],
    path: 'https://www.google.co.uk/images/srpr/'
  });
});

Демонстрация JSFiddle

Созданный мною jsfiddle показывает, как это можно сделать. Стиль display:none, который вы применяете к изображению, фактически удаляет элемент из DOM, а не просто скрывает его. Таким образом, полоса nav подскакивает вверх, потому что на самом деле там «ничего» нет до вызова fadeIn.

Вы все еще можете скрыть изображение, но вам нужно будет либо заменить его пустым элементом той же высоты, либо поместить его в контейнер, как в jsfiddle.

У меня была аналогичная проблема с моим контентом, прыгающим вниз при загрузке моего слайд-шоу.

Вот что я нашел: jsFiddle

HTML

<div id="Container">
<div id="box"></div>
<div id="element"> <!-- add content here --> </div>
</div>

css

#Container {
display: inline-block;
position: relative;
width: 100%;
}

#box {
padding-top: 25%;
/* adjust % for height */
}

#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:red; /* added for visibility */
}

Это делает большой жидкий держатель места. Просто поиграйте с процентами, чтобы получить желаемый размер.

Я впервые увидел этот метод где-то на SO, но думаю, что это была адаптация этого- http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio