[razorg1991]

Помогите допилить скрипт пожалуйста

Сейчас он выглядит так:

<script>
        (function(){
            var interval = 1000,
                pictures = [
                    '/bs-server/templates/bs-template/images/background2.jpg',
                    '/bs-server/templates/bs-template/images/background3.jpg',
                    '/bs-server/templates/bs-template/images/background4.jpg',
                    '/bs-server/templates/bs-template/images/background1.jpg'
                ];
            
            for (var i = 0; i < pictures.length; i++) {
                (new Image()).src = pictures[i];
            }
            
            var imageIndex = 0;
            setInterval(function(){
                var image = pictures[imageIndex++] || pictures[imageIndex = 0];
                if (document.addEventListener) {
                    document.body.style.backgroundImage = 'url('+ image + ')';
                } else {
                    document.body.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + image + ', sizingMethod="scale")';
                }
            }, interval);
        })();
        </script>

В принципе все работает, но есть парочку "НО":
1. При загрузке страницы первое фоновое изображение появляется не сразу, а только через время, указанное в скрипте

var interval = 1000

Очень нужно, чтобы картинка появлялась сразу (пробовал в css по умолчанию ставить background одну из картинок, итог - картинка появляется сразу, НО первая ее смена происходит так - background исчезает вовсе, задержка в var interval = 1000 а затем появляются уже остальные. Т.е. данный вариант не прокатил )

2. Очень нужно плавное изменение картинок (затухание первой - появление второй)

Люди хэлп