Black space between swaping images

Question

I'm having a issue with the website I'm creating. The truck image at the top is changing on scroll down, but while scrolling and changing the images there appears black space.

1) Images are 1400x600 JPG's, around 70kb each. I didn't lower the resolution because if someone accesses it from a 1920x1080 screen, the truck will be blurry and distorted.

2) The website is still not done, so it's on a free hosting now (000webhost.com), may this cause the images to load slower and the black space to appear?

Here is the website: http://denea.comeze.com/

Here's the script that changes the images, just in case:

var numberofscroll = 0;
var lastScrollTop = 0;

$(document).ready(function () {
    var numberofscroll = 1;
    var lastScrollTop = 0;
    var totalImages = 4;
    var dontHandle = false;
    $("#home").scroll(function () {
        if (dontHandle) return; // Debounce this function.
        dontHandle = true;

        var scrollTop = $(this).scrollTop();
        (scrollTop > lastScrollTop) ? numberofscroll++ : numberofscroll--;

        if (numberofscroll > totalImages) numberofscroll = totalImages;
        else if (numberofscroll < 1) numberofscroll = 1;

        change_background(numberofscroll);

        lastScrollTop = scrollTop;
        window.setTimeout(function() {
            dontHandle = false;
        }, 150); // Debounce!--let this handler run once every 400 milliseconds.
    });

    function change_background(num) {
        $("#home").css("backgroundImage", "url('images/movie_" + num + ".jpg')");
    };
});

Answer 1

Your Problem has to do with loading time.

Instead of loading the image, when the scroll begins, you can have the images you need already loaded in your page, that way you do not have any loading times, when swapping.

In HTML you have something like this:

<div class="headimg_container>
    <img id="image_1" class="headimg" style="display: none" src=".......">
    <img id="image_2" class="headimg" style="display: none" src=".......">
    <img id="image_3" class="headimg" style="display:block" src"......">
</div>

I used headimg_container as a container element. The class should have a definitve height, so when hiding and showing your images, the container does not collapse.

And in JS you can do something like this:

function change_background(num) {
    $(".headimg").hide();
    $("#image_" + num).show();
};

The result would be smooth, since you can just swap the visibility of the image-tags, without any delay.

Another solution could be to use sprites, but with a few heavy images, you might want to stick with loading them separately as I suggested above.

Hope that helps!