2010-12-10 17 views
1

誰かが私に次の問題を援助できるかどうか疑問に思うだけです。私は3つの(大きな)画像を回転させるために私のホームページにnivo-sliderを使っています。しかし、訪問者が初めてこのページを訪れると、すべての3つの画像がすべて5秒間見られてから、それらがすべてスライダにロードされます。Nivoスライダーのスピードアップ

これは私がサイト上で使用しているスクリプトです:

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

誰がどのように知っていますこのスクリプトで画像の読み込み速度を向上させてください。おかげ

答えて

0

申し訳ありませんが、私の最初の答えは完全に間違っていた、試してみてください。

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

+0

こんにちは、CSSの追加を試みました。しかし、私は本当の問題はイメージだと思う。ちょうど見ていた彼らは123キロバイトです。私はそれらを少し圧縮することをお勧めしますか? .jpg、.js、.cssでgzipを実行しています –

+0

サイトを最初に表示したときに最初のイメージがINDEXページに読み込まれることに問題があります。誰かが私がa)スピードを上げるか、b)nivo-sliderに解決策をコードすることができるかについて考えている人はいますか? –

1

はNivoSliderがそれらを表示するまで、すべての画像を非表示すること#slider img.display: noneを追加します正しく。

関連する問題