jQueryの - スライドショー、ギャラリー：順々（5次）の画像をロードし、私は学習教材、写真など</p> <p>のためにスライドショーの種類に取り組んできた代わりに、すべての一度で

Question

は、私の同僚は何かを述べています私は少し気になります。 1つのスライドショーに50以上の画像が存在することがあるので、ページの読み込みが完了してスライダーアニメーションが開始されるまでに時間がかかることがあります。 私は、次の5つまたは10つのスライドを一度に読み込むのではなく、ただ読み込む方法があるのだろうかと疑問に思っていましたか？

多分、あなたの誰かがこの問題の適切な解決法を知っていますか？ここで

HTML-コード：事前に

<div id="galleria1" class="JSLgallery" width="640" height="450" data-interval="1000" data-fadeTime="0" data-animation="fade"> 
     <div class="JSLmask"> 
      <a href="#" class="show" > 
       <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie1.jpg" /> 
      </a> 
      <a href="#"> 
       <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie2.jpg" /> 
      </a> 
      <a href="#"> 
       <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie3.jpg" /> 
      </a> 
      <a href="#"> 
       <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie4.jpg" /> 
      </a> 
      <a href="#"> 
       <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie5.jpg" /> 
      </a> 
      <a href="#"> 
       <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie6.jpg" /> 
      </a> 
     </div> 
    </div> 

おかげで、

マリオ

Answer 1

あなたが好きになるそのうちの一つの多くの技術、使用してロード画像を遅らせることができ

：

を）最初のイメージを除くすべてのイメージに対して、src以外の属性（たとえば、isrc）でイメージURLを定義します。

<img width="640" height="450" alt="" rel="Slider-Image" isrc="/LMS/JSLslider/Images/Pyramid/Folie1.jpg" /> 

b）にあなたのページのスタートアップコードでは、各「を移動ツー次のスライド」イベントに、あなたが呼び出すことができます。

function loadMoreImages() { 
    var limit = 5; 
    var i = 0; 
    $('img[isrc]').each(function() { 
     if(i < limit) { 
      $(this).attr('src', $(this).attr('isrc')); 
      $(this).removeAttr('isrc')); 
     } 
     i++; 
    }); 
} 

$(document).ready(function() { 
    loadMoreImage(); 
    $('#yournextbutton').click(function() { loadMoreImage(); }); 
});