Javascript Jquery背景幻灯片会闪烁

我有一个小脚本来创建css背景图像幻灯片。问题是图像会周期性地闪烁，而且原因是众所周知的

/********************************
/* HERO UNIT BACKGROUND SLIDES
/*******************************/
$(document).ready(function() {
    var target = $('.hero-unit');
    var backgrounds = [
        'url(/static/template/slides/slide-2.jpg)', 
        'url(/static/template/slides/slide-3.jpg)',
        'url(/static/template/slides/slide-4.jpg)',
        'url(/static/template/slides/slide-5.jpg)',
        'url(/static/template/slides/slide-1.jpg)'
     ];
    var current = 0;

    function nextBackground() {
        target.css(
            'background-image',
        backgrounds[current = ++current % backgrounds.length]);

        setTimeout(nextBackground, 5000);
    }
    setTimeout(nextBackground, 5000);
        target.css({
            'background-image': backgrounds[0],
            WebkitTransition : 'background-image 3s ease-in-out',
            MozTransition    : 'background-image 3s ease-in-out',
            MsTransition     : 'background-image 3s ease-in-out',
            OTransition      : 'background-image 3s ease-in-out',
            transition       : 'background-image 3s ease-in-out'
        });
});

---

例如，我认为问题与图像加载时间有关。我认为加载后的图像应该缓存，对吗？图像均小于400k。是否有另一种方法可以预加载和缓存图像？如果只是将带有URL的字符串添加到数组中，则不会加载图像。最有可能的情况是，经过一次循环后，图像之间的延迟会消失。请尝试创建div并在每个div中设置不同的背景路径，而不是每次要更改背景时都替换元素