jQuery setInterval 幻灯片放映滞后

Question

我的网速非常慢 (<1.5 mbps)，这有一个好处：测试站点功能非常棒。

我制作了一个图片幻灯片。它的工作原理，只是在幻灯片更改时，新幻灯片会出现在当前幻灯片下方。这与我很棒的互联网有关，还是对那些拥有高速（真实）互联网的人来说也是一个问题？我该如何解决这个问题？

var slide_id = 0;
var total_slides = 0;
var nextSlide = function(){
    if (slide_id + 1 == total_slides) {
         slide_id = 0;   
    } else {
         slide_id++;   //count up then revert to 0
    }
    $('.carousel img').fadeOut();
    $('.carousel__image--slide' + slide_id).fadeIn();
};

$(document).ready(function(){
    total_slides = $('.carousel img').length;
    var timer = setInterval(nextSlide,3000);
});

*{
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
.width_retainer{
 max-width:1000px;
 margin: 0 auto;
}
.header{
 height:80px;
 background-color:#d74b36;
}

.carousel__image{
 width:100%;
 display: none;
}
.carousel__image--slide0{
 display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <link type="text/css" rel="stylesheet" href="studs.css">
 <script src="jquery.js"></script>
 <script src="studs.js"></script>
</head>
<body>
 <div class="width_retainer">
  <div class="header"></div>

  <div class="carousel">
   <img class="carousel__image carousel__image--slide0" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__0_zps13isuxhq.jpg">
   <img class="carousel__image carousel__image--slide1" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__1_zpsjjh046r0.jpg">
   <img class="carousel__image carousel__image--slide2" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__2_zpsdjseyr2g.jpg">
   <img class="carousel__image carousel__image--slide3" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__3_zpsu6vadamg.jpg">
   <img class="carousel__image carousel__image--slide4" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__4_zpsuoqdagzs.jpg">
   <img class="carousel__image carousel__image--slide5" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__5_zpsxyb66qcd.jpg">
   <img class="carousel__image carousel__image--slide6" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__6_zpswlarodo8.jpg">
  </div>
 </div>
</body>
</html>

Answer 1

尝试让淡入发生在淡出完成后：

$('.carousel img:visible').fadeOut(function(){
  $('.carousel__image--slide' + slide_id).fadeIn();
});

编辑：现在只淡出可见图像。

jQuery setInterval 幻灯片放映滞后

jQuery setInterval slideshow lagging

html

css

jquery

setinterval

carousel