我有一些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;
}
解决方法
@ 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/'
});
});
