Фоновая загрузка изображений // JQuery, CSS

Мы имеем следующее, экран который встречает пользователя единажды при заходе на сайт который реализован следующим образом:

        var timeout_id = 0,
        hold_time = 1000,
        holdOnStart = $('.holdOnStart');
    holdOnStart.mousedown(function() {
        timeout_id = setTimeout(start_Session, hold_time);
    }).bind('mouseup mouseleave', function() {
        clearTimeout(timeout_id);
    });
    function start_Session() {
        $('section.ready').addClass('animate-bg-starter');
        $('.content-block a.holdOnStart').css({'background-position': '300%', 'padding' : '10px'});
        var text = $('a.holdOnStart').text();
        $('.content-block a.holdOnStart').text(text.replace('ЗАЖМИ ДЛЯ СТАРТА', 'ТОЧКА НЕВОЗВРАТА...'));
        setTimeout(function() {
            $('section.ready div.first-overlay h1').css({'transition' : '.25s', 'position' : 'relative', 'margin-top': '-100vh'});
            $('section.ready div.first-overlay h2').css({'transition' : '.25s', 'position' : 'relative', 'margin-top' : '-100vh'});
            $('section.ready div.social').css({'transition' : '.25s', 'position' : 'relative', 'margin-top' : '100vh'});
            $('section.ready a.controller').css({'transition' : '.25s', 'position' : 'relative', 'margin-top' : '100vh'});
        }, 1500);
        setTimeout(function() { $('h4.timer').css({'display' : 'block', 'transition' : '.25s', 'opacity' : '0.5' }); }, 1600);
        setTimeout(function() { $('section.ready').css({'opacity' : '0', 'transition' : '.5s'}); }, 5000);
        setTimeout(function() { $('section.ready').css('display', 'none'); localStorage.setItem('dS', 1); }, 5500);

.addClass - дарует анимацию слайда фонов:

.animate-bg {
  @-webkit-keyframes animate-bg {
    0% {
      background-image: url('../img/Start-Backgrounds/First.jpg');
    }
    5% {
      background-image: url('../img/Start-Backgrounds/Two.jpg');
    }
    10% {
      background-image: url('../img/Start-Backgrounds/Three.jpg');
    }
    15% {
      background-image: url('../img/Start-Backgrounds/Four.jpg');
    }
    20% {
      background-image: url('../img/Start-Backgrounds/Five.jpg');
    }
    25% {
      background-image: url('../img/Start-Backgrounds/First.jpg');
    }
    30% {
      background-image: url('../img/Start-Backgrounds/Two.jpg');
    }
    35% {
      background-image: url('../img/Start-Backgrounds/Three.jpg');
    }
    40% {
      background-image: url('../img/Start-Backgrounds/Four.jpg');
    }
    45% {
      background-image: url('../img/Start-Backgrounds/Five.jpg');
    }
    50% {
      background-image: url('../img/Start-Backgrounds/First.jpg');
    }
    55% {
      background-image: url('../img/Start-Backgrounds/Two.jpg');
    }
    60% {
      background-image: url('../img/Start-Backgrounds/Three.jpg');
    }
    65% {
      background-image: url('../img/Start-Backgrounds/Four.jpg');
    }
    70% {
      background-image: url('../img/Start-Backgrounds/Five.jpg');
    }
    75% {
      background-image: url('../img/Start-Backgrounds/First.jpg');
    }
    80% {
      background-image: url('../img/Start-Backgrounds/Two.jpg');
    }
    85% {
      background-image: url('../img/Start-Backgrounds/Three.jpg');
    }
    90% {
      background-image: url('../img/Start-Backgrounds/Four.jpg');
    }
    95% {
      background-image: url('../img/Start-Backgrounds/Five.jpg');
    }
    100% {
      background-image: url('../img/Start-Backgrounds/First.jpg');
    }
  }

Но тут незадача, фоны при активации не успевают загрузится и делают это по факту, 1-1.5с уходит на загрузку фонов и соответственно так быть не должно, как загружать эти изображения на страницу сразу при заходе на сайт? Так же заинтересован в общих советах по улучшению кода, указаниям на мои костыли, хочу "Как правильно". Спасибо!