6

我有一点 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;
}
4

3 回答 3

6

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

于 2013-04-15T17:38:23.060 回答
3

我制作的jsfiddle展示了如何做到这一点。您在图像上添加的display:none样式实际上是从 DOM 中删除元素，而不仅仅是隐藏它。所以酒吧跳了起来，因为在通话nav之前实际上“什么都没有” 。fadeIn

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

于 2013-04-10T13:56:03.057 回答
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

于 2013-04-15T00:45:31.883 回答