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

Posted 2023-05-09

【中文标题】jQuery：在淡入之前保留图像容器的响应 div 大小

【英文标题】：jQuery: retain a responsive div size for an image container before fadeIn

【发布时间】：2013-04-02 08:41:27

【问题描述】：

我有一点 jQuery，它从文件夹中选择一个随机图像，并在每个页面加载时将其淡入到一个 div 中。问题是图像正下方的菜单 div 在图像淡入之前跳到图像的空白处。

在图像淡入之前让图像 div 保持高度的最佳方法是什么？ CSS在图像淡入之前“填充” div？或者在随机图像淡入之前加载空白.jpg？ （所有随机图像的大小相同，1000px 宽 x 250px 高）。

我需要保留设计的响应性，因此最好的解决方案可能是预加载空白 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"   >
    <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;

【问题讨论】：

在图片周围放置一个固定高度的容器。当图像淡入淡出时，它的高度变化不会导致流量问题。容器的固定尺寸应该可以防止流动问题。

谢谢，但这破坏了设计的响应能力。

这里有什么响应？上面的图像标签具有以隐式 px 单位（在 HTML 中）指定的尺寸。响应式布局元素通常以 % 或 em 指定。调整浏览器大小时，图像应该以什么方式改变？

如果问题是由于在图像上使用display:none引起的，如何以0而不是display:none的不透明度开始图像，然后使用fadeIn()或@ 987654328@?

从 CSS 中的 img.randomheader 中删除 display:none 并将您的 jQuery 行更改为 $(this).attr( src: fullPath, alt: displayImage ).hide().fadeIn('slow');。这有帮助吗？

【参考方案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

【讨论】：

感谢您的工作，但由于某种原因，这仍然破坏了我的响应式设计。有没有办法在 jquery 函数中预加载一个空白的 1000x250 像素图像，然后淡入随机图像？丑陋，是的，但这是保持响应式设计的一种方式。 ——

.randomheader img height 不应该是“auto”吗？而@songdogtech 为什么要通过 jquery 预加载空白图像？你不能把它作为 style="opacity: 0" 包含在你的 html 中，然后替换图像，然后用动画淡入吗？

@songdogtech - 如果您要使用空白图像，则不需要上述内容，我会在保持图像纵横比的同时尽可能小地创建图像将加载（以帮助提高性能）。因此，如果您的图像是 958 像素 x 718 像素，则纵横比为 4:3，因此您的空白图像可以是 4 像素 x 3 像素。然后你只需在 CSS 中将其宽度设置为 100%，将高度设置为自动。希望这会有所帮助。

@Bry - 没有高度不应该是自动的。元素的高度由底部填充决定，因此需要设置为 0。

@Jenna Smith，你说得对，效果很好。谢谢！很抱歉回答的延迟。

【参考方案2】：

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

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

【讨论】：

谢谢，这行得通，但它破坏了设计的响应能力。我需要容器上的 height:auto 以在调整浏览器窗口大小时保持容器响应。或者我需要换一个 250pxx1000px 的空白 jpg。

您能否详细说明什么是响应式？图像会改变大小还是什么？我看不出你想做什么。

是的，图像会根据浏览器大小改变大小，使用 max-width: 100%;高度：自动；所以我认为在随机图像淡入之前预加载的空白.jpg 1000x250 将保持 div 的高度和宽度，并且在随机图像淡入之前它不会崩溃。我不知道响应能力是否可以在 jsfiddle 中模拟，但它破坏了我的实时站点的响应能力。

我在问题中添加了一些细节。

最小高度：250px 会扼杀响应性；即使图像的宽度缩小，也可以将 div 保持在 250px 高，这会在图像容器下方留下空间。

【参考方案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 函数中预加载一个空白的 1000x250 像素图像，然后淡入随机图像？丑陋，是的，但这是保持响应式设计的一种方式。

@songdogtech 你能链接到一个例子吗？不确定这是如何破坏响应式设计的。