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 Demo

Answer 2

我制作的jsfiddle显示了如何做到这一点。您放在图像上的display:none样式实际上会从DOM中删除元素，而不仅仅是隐藏它。所以nav栏会跳起来，因为在fadeIn来电之前实际上没有任何内容。

您仍然可以隐藏图像，但是您需要将其替换为具有相同高度的空白元素，或者将其放在像jsfiddle中的容器中。

Answer 3

我的内容在我的幻灯片加载时跳了下来，我遇到了类似的问题。

这是我发现的 - 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

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

3 个答案: