Javascript 使用jQuery的div幻灯片

我使用这个jQyery代码来滑动包含街道摄影机流的div

  jQuery(function () {
var $els = $('div[id^=slide_]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 20000) });

它工作得很好。我遇到的问题是，当它滑到下一个街头摄像机时，需要一段时间才能加载流

我试图弄清楚下一个摄像头的can fadeIn如何将淡出延迟5秒，以便下一个摄像头可以在上一个摄像头淡出之前“预加载”

有没有办法解决这个问题

---

PS：很抱歉我的英语不好，所以我解决了我的问题。 现在我有一个新的问题，当从一个视频切换到下一个视频时，我会出现闪烁

她是我的代码，可能不是最优雅的代码，但它的工作

$("#slideshow > span:gt(0)").hide();

setInterval(function() {
  $('#slideshow > span:first')
    .delay().css({'display':'inline'})    
    .delay().css({'opacity':'1',}).animate({'opacity': 0}, 3000)
    .next()  
    .delay().css({'opacity':'0',}).animate({'opacity': 1}, 3000)
    .delay().css({'display':'inline'})        
    .end()
    .appendTo('#slideshow');
}, 10000);

setInterval(function() {
  $('span:nth-child(2)')
    .delay().css({'display':'inline','opacity':'0',})       
    .end()
}, 10000);

setInterval(function() {
  $('span:nth-last-child(2)')
    .delay().css({'display':'none','opacity':'0',})       
    .end()
}, 10000);

---

关于如何在从一个视频到下一个视频进行交易时消除闪烁，有什么想法吗？

我不是surt，而是试试：$els.eq（i）.fadeIn（5000）；而不是$els.eq（i.fadeIn（）；我尝试过只延迟淡入，在加载下一个摄像头之前给我一个5秒的空白屏幕，因为在开始淡入之前，你可以在一个隐藏的div中加载下一个摄像头流。然后它会被缓存，应该会很快出现？问题是我有5个全高清摄像头，同时预加载所有摄像头需要消耗大量带宽和CPU资源。你不需要预加载所有图像，只需加载下一个图像，继续加载下一个图像并滑动它，直到加载完所有图像。