滚动改变背景像一个电影

我想用200张图片改变网页的背景图像，并像电影一样播放它们。我的代码是工作的，但是过渡是闪烁时，图片上的滚动变化。似乎在滚动期间，CSS更新，我得到一个闪烁。这在Chrome和Safari中非常明显，但在FF中也是如此。在FF中看起来更流畅。奇怪。需要帮忙解决问题。我使用下面的代码。请，任何帮助平滑过渡，使它更像电影将是伟大的。我是jquery新手，但有编程背景。任何和所有的建议是非常感谢!

我研究了将近三天。有些人提到，更新。htaccess文件有助于将文件的头设置为不过期，并且浏览器正在发送304。我不知道如何测试，但下面是我的代码。

var pics = []; // CREATE PICS ARRAY
    //PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload(){
    for(i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i]; 
    }
};
preload(
'bgImage/1.jpg'
,'bgImage/2.jpg'
,'bgImage/3.jpg'
,'bgImage/4.jpg'
,'bgImage/5.jpg'
); // THERE ARE 200 TOTAL IMAGES THAT WE ARE LOADING...
function switchImage() {
var s = $(window).scrollTop();
var index = 0;
if(s>   10  ){index =   1   ;}
if(s>   20  ){index =   2   ;}
if(s>   30  ){index =   3   ;}
if(s>   40  ){index =   4   ;}
if(s>   50  ){index =   5   ;}
// THERE IS 200 IF STATEMENTS IN TOTAL
// THE ODER OF THE IMAGES STARTS IN THE MIDDLE AND WE HAVE TO ADJUST DEPENDING ON POSITION
// USING THE IF STATEMENTS WAS THE EASIEST SOLUTION
$("body").css('background-image', 'url(' + pics[index].src + ')');
};
$(document).ready(function () {
switchImage();
//alert("images and dom loaded");
});
$(window).scroll(function () {
switchImage();
});