加速Nivo-Slider

Question

只是想知道是否有人可以帮我解决以下问题。我在我的主页上使用nivo-slider旋转3（大）图像;但是，当访问者第一次访问该页面时，所有3张图像都可以看到好5秒，然后才会加载到滑块中。

这是我在网站上使用的脚本：

    <script type="text/javascript">
    $(window).load(function() {
        $('#nivo-slider').nivoSlider({
            effect:'random', 
            slices:15,  
            animSpeed:500, 
            pauseTime:5000, 
            startSlide:0, 
            directionNav:true, 
            directionNavHide: false, 
            controlNav:true, 
            controlNavThumbs:false, 
            controlNavThumbsFromRel:false, 
            controlNavThumbsSearch: '.jpg', 
            controlNavThumbsReplace: '_thumb.jpg', 
            keyboardNav:true, 
            pauseOnHover:true, 
            manualAdvance:false, 
            captionOpacity:0.8, 
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){} 
        });
    });
    </script>

然后我有以下HTML用于加载图像：

<div id="slideshow">
                 <div class="slide slide-wide bg1">
                     <div class="containit ornament-left">
                         <div class="image">
                            <div class="thumb">
                              <div id="nivo-slider">
                                <a href="/service/"><img src="/images/slider/slide1.jpg" alt="" title="" /></a>
                                <a href="/service/"><img src="/images/slider/slide2.jpg" alt="" title="" /></a>
                                <a href="/service/"><img src="/images/slider/slide3.jpg" alt="" title=""/></a>
                                </div>
                            </div>
                         </div>
                     </div>
               </div>
      </div>

有没有人知道如何使用此脚本提高图像加载速度，如果是这样，请帮助我。感谢

Answer 1

将display: none添加到#slider img.这将隐藏所有图像，直到NivoSlider正确显示它们。

Answer 2

对不起，我的第一个答案完全错了，试试：

#slider {
    position:relative;
    width: 800px; //your image width
    height: 583px; //your image height
 }
#slider img {
    position:absolute;
    top:0px;
    left:0px;
 }

您可以在此处查看我的实施： http://www.duopixel.com/portafolio/