Loading images in background for smooth JavaScript/GSAP full page slideshow

I've built a small full screen slideshow for a site I'm working on and I've run into a block. What I'm doing is initially loading the first two images, and then as the slideshow runs, loading the subsequent images (so when the transition to the second image is beginning the third image is being loaded.

Now I'm attempting to use a technique I've used before, and seen all over this site, but its not working. Basically, you create an invisible image node in js, set the src, and then wait for it to load to set the background-image of

if (firstTime) {
    var imageSrc = imagePath + nextImageIndex + ".jpg"
    var image = new Image();
    image.src = imageSrc
    image.onload = function(){
        var css = "url(" + imageSrc + ") no-repeat 50% 50% fixed"
        nextElement(imageIndex).style.background = css
        nextElement(imageIndex).style.backgroundSize = "cover"
    }
}

The image gets loaded, but the animation does not work, instead of a smooth transition, the next image just flashes onto the screen. The strange thing is, the next time around in the slide show, everything works as expected and the transitions are smooth. This leads me to believe that something is going wrong with the image loading.

I'm using GSAP to animate and here is my full code below. You can see the script in action at http://ift.tt/1NuaRKj and see what I'm talking about, you'll notice the first transition is smooth because I load the image into css at the top of the page, but the ones that follow and are dynamically loaded just appear suddenly.

// durations
var d =
{
    "delay":   5,
    "animate": 1,
}

var imageCount = 6

var imagePath = "/static/img/landing_page_bg/Image"

var firstTime = true;

// get currently showing image holder
var currentElement = function(i){
    return document.querySelectorAll('.carousel-item')[i-1];
}
// get image holder up next
var nextElement = function(i){
    if ( i == imageCount ) i = 0;
    return document.querySelectorAll('.carousel-item')[i];
}

// the slideshow function
var nextImage = function(imageIndex){

    // if imageIndex is greater than number of images reset
    if ( imageIndex == imageCount + 1 ) {
        firstTime = false;
        imageIndex = 1;
    }

    // if imageIndex is maxed out reset next image index
    if ( imageIndex == imageCount ) {
        var nextImageIndex = 1;
    } else {
        var nextImageIndex = imageIndex + 1;
    }

    // preload image before applying to css of image holder
    if (firstTime) {
        var imageSrc = imagePath + nextImageIndex + ".jpg"
        var image = new Image();
        image.src = imageSrc
        image.onload = function(){
            var css = "url(" + imageSrc + ") no-repeat 50% 50% fixed"
            nextElement(imageIndex).style.background = css
            nextElement(imageIndex).style.backgroundSize = "cover"
        }
    }

    // animation paramater for current image
    oldImageParams = {
        delay: d.delay,
        autoAlpha: 0,
    }

    // animation parameters for next image + listeners
    newImageParams = {
        delay: d.delay,
        autoAlpha: 1,
        onStart: function(){
            currentElement(imageIndex).style.zIndex = -1;
            nextElement(imageIndex).style.zIndex = 0;
        },
        onComplete: function(){
            imageIndex += 1
            setTimeout(function(){
                nextImage(imageIndex);
            },0);
        }
    }

    // run animations
    TweenLite.to(currentElement(imageIndex), d.animate, oldImageParams);
    TweenLite.to(nextElement(imageIndex), d.animate, newImageParams);

}

// start slideshow on page load
document.onready =  function(){
    nextImage(1);
};