在jQuery滑塊中預加載圖像

Question

如何將我的第一個圖像設置為在以下鏈接中預加載，以便沒有空格，然后滾動到第二個圖像。

也許使用淡入淡出效果會更好？

例

這是我的代碼

$(function() {

    var N = 0;
    var K = 0;
    var tt

    START();

    function START() {
      tt = setInterval(NEXT, 3000);
    }

    function NEXT() {

      if( N < $('.photo-slider-img').length - 1 ) {
        N++;
      } else {
        N = 0;
      }

      CHANGE();
    }

    function CHANGE() {
      K = 1;
      $('.photo-slider-img.NOW').stop().animate({left: '-100%'}, 500);
      $('.photo-slider-img').eq(N).stop().css({left: '100%'}).animate({left: 0}, 500, OK);
    }

    function OK() {
      K = 0;
      $('.photo-page').removeClass('active').eq(N).addClass('active');
      $('.photo-slider-img').removeClass('NOW').eq(N).addClass('NOW');
    }



    $('.photo-page').on('click', function() {

      if( $(this).index() == N || K == 1 ) return;

      if ( tt ) {
         clearInterval( tt );
         tt = 0;
         N = $(this).index();
         CHANGE();
         START();
       }
    });

});

Answer 1

您始終可以將圖像預加載到不可見的dom節點中-這會緩存圖像，因此您可以立即使用它