jQuery: conserva una dimensione div reattiva per un contenitore di immagini prima della dissolvenzaIn

Question

Ho un po 'di jQuery che seleziona un'immagine casuale da una cartella e la dissolve in un div su ogni caricamento di pagina. Il problema è che il div del menu appena al di sotto dell'immagine salta nello spazio vuoto dell'immagine prima che l'immagine si dissolva.

Qual è il modo migliore per mantenere il div dell'immagine mantenendo l'altezza prima che l'immagine si dissolva? CSS per "riempire" il div prima che l'immagine si dissolva? O carica uno spazio vuoto prima che l'immagine casuale si dissolva? (Tutte le immagini casuali hanno la stessa dimensione di 1000 px larghezza x 250 px di altezza).

Ho bisogno di mantenere la reattività del design, quindi è possibile che la soluzione migliore sia precaricare un jpg vuoto e quindi dissolvere l'immagine casuale.

Non ho inserito le matrici di immagine e didascalia per semplicità, ma questa funzione emette l'immagine con la classe .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 praticamente colpito il chiodo sulla testa lì ... ho creato un esempio per voi in base sullo stesso principio, quindi puoi vederlo funzionare.

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 che ho fatto mostra come questo può essere fatto. Lo stile display:none che hai messo sull'immagine effettivamente rimuove l'elemento dal DOM, non solo nascondendolo. Pertanto la barra nav salta in alto perché in realtà non vi è "nulla" fino alla chiamata fadeIn.

È ancora possibile nascondere l'immagine, ma è necessario sostituirla con un elemento vuoto con la stessa altezza oppure inserirla in un contenitore come nel jsfiddle.

Answer 3

Ho avuto un problema simile con il mio contenuto che saltava giù quando la mia presentazione è stata caricata.

Questo è quello che trovato- 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 */ 
} 

Si fa un grande luogo contenitore di fluido. Basta giocare con le percentuali per ottenere la dimensione desiderata.

ho visto questo metodo da qualche parte su SO, ma penso che era un adattamento di questo- http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio