Черное пространство между обменивающимися изображениями

Question

У меня проблема с созданным мной сайтом. Изображение грузовика вверху меняется на прокрутку вниз, но при прокрутке и изменении изображений появляется черное пространство.

1) Изображения 1400x600 JPG, около 70кб каждый. Я не уменьшил разрешение, потому что, если кто-то обратится к нему с экрана 1920x1080, грузовик будет размытым и искаженным.

2) Веб-сайт по-прежнему не выполнен, поэтому теперь он находится на бесплатном хостинге (000webhost.com), может ли это заставить изображения загружаться медленнее, а черное пространство появится?

Вот сайт: http://denea.comeze.com/

Вот скрипт, который изменяет изображения, на всякий случай:

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

Ваша проблема связана со временем загрузки.

Вместо того, чтобы загружать изображение, когда начинается прокрутка, вы можете загружать изображения, которые уже загружены на вашу страницу, таким образом у вас нет времени загрузки при обмене.

В HTML у вас есть что-то вроде этого:

<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> 

я использовал headimg_container в качестве элемента контейнера. Класс должен иметь определенную высоту, поэтому при скрытии и показе ваших изображений контейнер не разрушается.

И в JS вы можете сделать что-то вроде этого:

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

Результат будет гладкой, так как вы можете просто поменять видимость изображения-тегов, без каких-либо задержек.

Другим решением может быть использование спрайтов, но с несколькими тяжелыми изображениями вы можете захотеть погрузить их отдельно, как я предложил выше.

Надеюсь, что это поможет!