jQuery: giữ lại kích thước div đáp ứng cho vùng chứa hình ảnh trước khi fadeIn

Question

Tôi có một chút jQuery chọn một hình ảnh ngẫu nhiên từ một thư mục và làm mờ nó trong một div trên mỗi lần tải trang. Vấn đề là div menu bên dưới hình ảnh nhảy lên không gian trống của hình ảnh trước khi hình ảnh mờ dần.

Cách tốt nhất để giữ hình ảnh div giữ nguyên chiều cao trước khi hình ảnh bị mờ dần là gì? CSS để "điền" div trước khi hình ảnh mờ dần? Hoặc tải một .jpg trống trước khi hình ảnh ngẫu nhiên mờ dần? (Tất cả các hình ảnh ngẫu nhiên có cùng kích thước 1000px chiều rộng x 250px chiều cao).

Tôi cần giữ lại sự phản hồi của thiết kế, vì vậy có thể giải pháp tốt nhất là tải trước một jpg trống và sau đó mờ dần trong hình ảnh ngẫu nhiên.

Tôi chưa bao gồm hình ảnh và chú thích mảng vì đơn giản, nhưng chức năng này kết quả đầu ra hình ảnh với lớp .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 khá nhiều nhấn đinh trên đầu đó ... Tôi tạo ra một ví dụ cho bạn dựa trên cùng một nguyên tắc để bạn có thể thấy nó hoạt động.

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

A jsfiddle mà tôi đã trình bày cách thực hiện điều này. Kiểu dáng display:none bạn đưa vào hình ảnh thực sự xóa phần tử khỏi DOM, không chỉ ẩn nó. Vì vậy, thanh nav nhảy lên vì có 'không có gì' ở đó cho đến khi cuộc gọi fadeIn được thực hiện.

Bạn vẫn có thể ẩn hình ảnh, nhưng bạn sẽ cần phải thay thế hình ảnh đó bằng phần tử trống có cùng độ cao hoặc đặt nó vào một vùng chứa như trong jsfiddle.

Answer 3

Tôi gặp vấn đề tương tự với nội dung của mình nhảy xuống khi trình chiếu của tôi được tải.

Đây là những gì tôi found- 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 */ 
} 

Nó làm cho một giữ chỗ chất lỏng tuyệt vời. Chỉ cần chơi với tỷ lệ phần trăm để có được kích thước mong muốn.

đầu tiên tôi thấy phương pháp này ở đâu đó trên SO, nhưng tôi nghĩ đó là một sự thích nghi của this- http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio