Accélérer Nivo-Slider

Question

Je me demandais si quelqu'un pouvait m'aider avec le problème suivant. J'utilise nivo-slider sur ma page HOME pour faire pivoter 3 (grandes) images; Cependant, lorsqu'un visiteur visite la page pour la première fois, toutes les 3 images peuvent être vues pendant 5 bonnes secondes avant qu'elles ne se chargent toutes dans le curseur.

Voici le script que j'utilise sur le site:

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

Et je puis le code HTML suivant pour le chargement des images:

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

Est-ce que quelqu'un sait comment améliorer la vitesse de chargement de l'image avec ce script et si oui pouvez-vous m'aider s'il vous plaît. Merci

Answer 1

Désolé, ma première réponse était tout à fait tort, essayez:

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

Vous pouvez vérifier ma mise en œuvre ici: http://www.duopixel.com/portafolio/

Answer 2

Ajouter display: none-#slider img. qui permet de masquer toutes les images jusqu'à ce que NivoSlider les affiche correctement.