Ускорение Nivo-Slider

Question

Просто интересно, может ли кто-нибудь помочь мне со следующей проблемой. Я использую nivo-slider на моей странице HOME для поворота 3 (больших) изображений; hwoever, когда посетитель посещает страницу в первый раз, все 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

К сожалению, мой первый ответ был совершенно неправильно, попробуйте:

#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/

Answer 2

Добавить display: none в #slider img. Это будет скрывать все изображения, пока NivoSlider не отображает их должным образом.