jQuery:在fadeIn之前保留图像容器的响应div大小

Question

我有一些jQuery从文件夹中选择一个随机图像,并在每个页面加载时将其淡入div.问题是图像下方的菜单div在图像淡入之前跳转到图像的空白区域.

在图像淡入之前,图像div保持高度的最佳方法是什么？CSS在图像淡入之前"填充"div？或者在随机图像淡入之前加载空白.jpg？(所有随机图像的大小均为1000像素宽x 250像素高).

我需要保留设计的响应性,因此最好的解决方案是预加载空白jpg,然后淡入随机图像.

为简单起见,我没有包含图像和标题数组,但此函数使用.randomheader类输出图像:

jQuery的:

    <script>
    $(document).ready(function(){
     $('.randomheader').randomImage();
    });
    </script>

<script>
(function($){

    $.randomImage = {
        defaults: {

            path: '/fullpathhere/headerimages/',

            myImages: ['image1.jpg' , 'image2.jpg' , 'image3.jpg'],

            myCaptions: ['Caption 1' , 'Caption 2' , 'Caption 3']    
        }           
    }

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

            return this.each(function() {
                var imageNames = config.myImages;
                var imageCaptions = config.myCaptions;
                var imageNamesSize = imageNames.length;
                var randomNumber = Math.floor(Math.random()*imageNamesSize);
                var displayImage = imageNames[randomNumber];
                var displayCaption = imageCaptions[randomNumber];
                var fullPath = config.path + displayImage;

                // Load the random image
                $(this).attr( { src: fullPath, alt: displayImage }).fadeIn('slow');

                // Load the caption
                $('#caption').html(displayCaption).fadeIn('slow');
            });
        }
    }); 
    </script>

HTML:

    <header id="masthead" class="site-header" role="banner">

    <!-- random image loads in the div below -->
    <img src="" class="randomheader" width="1000" height="250" alt="header image">
    <div id="caption"></div>

   <!-- The nav div below jumps up into the div above -->
   <nav id="site-navigation" class="main-navigation" role="navigation">
       // nav here
   </nav>

CSS:

.randomheader {
    margin-top: 24px;
    margin-top: 1.714285714rem;
}

img.randomheader {
    max-width: 100%;
    height: auto; 
    display: none;
}

Answer 1

@ 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演示