创建滑块占位符以解决锚点问题

Question

我目前正在构建网站并使用位于此处的平滑模板： Smoothy Template

如果您不断刷新网站，您会看到Nivo Slider未立即加载。一旦Nivo滑块加载，这导致我的所有主页链接被垂直抛出与滑块图像相同的高度。我已经尝试了几种解决方案，例如手动设置图像高度和宽度，以及使用Nivo Slider加载后淡出的占位符，但无济于事。

这是我的代码：

    <div id="sliderwrapper">

    <div  id="slider"  class="nivoSlider templatemo_slider">
        <a href="#"><img src="images/slider/img_1_blank.jpg" width="1050" height="500" alt="slide 1" /></a>             
        <a href="#"><img src="images/slider/img_2_blank.jpg" width="1050" height="500" alt="slide 2" /></a>  
        <a href="#"><img src="images/slider/img_3_blank.jpg" width="1050" height="500" alt="slide 3" /></a>                 
</div>
<div id="preloader" class"nivoSlider templatemo_slider">
<img src="images/preloader.jpg" width="1050" height="500" />
</div>
</div>

这是我的功能：

$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:12,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){        $('#preloader').fadeOut(500);} //Triggers when slider has loaded

});
});