Javascript 在jQuery滑块中预加载图像

如何在下面的链接中设置我的第一个图像以预加载，这样我就不会有空白，然后它会滚动到第二个图像上

也许使用淡入淡出会更好

这是我的密码

$(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();
       }
    });

});

$（函数（）{
var N=0；
var K=0；
var tt
START（）；
函数START（）{
tt=设置间隔（下一步，3000）；
}
函数NEXT（）{
如果（N<$（'.photo slider img'）。长度-1）{
N++；
}否则{
N=0；
}
改变（）；
}
函数更改（）{
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）；
}
函数OK（）{
K=0；
$（'.photo page'）.removeClass（'active'）.eq（N）.addClass（'active'）；
$（'.photo slider img'）.removeClass（'NOW'）.eq（N）.addClass（'NOW'）；
}
$（'.photo page'）。在（'click'，function（）上{
if（$（this）.index（）==N | | K==1）返回；
如果（tt）{
净间隔（tt）；
tt=0；
N=$（this.index（）；
改变（）；
START（）；
}
});
});

您始终可以将图像预加载到不可见的dom节点中-这会缓存图像，以便您可以立即使用它