javascript - 加速 Nivo-Slider

Question

只是想知道是否有人可以帮助我解决以下问题。我在主页上使用 nivo-slider 来旋转 3 张(大)图像；然而，当访问者第一次访问该页面时，所有 3 个图像在加载到 slider 之前可以看到整整 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 正确显示它们。