Как сделать плавную смену изображений в background, при скролле на фиксированном элементе?Или как предзагрузить изображения?

Question

[okymano]

С помощью плагина mousewheel сделал чтоб background менялся при прокрутке, но теперь проблема в том что при скролле изображения не успевают прогрузиться, видны как кадры пропадают из за скорости. Как сделать чтоб через каждые 100 px менялось изображение, а не через каждый 1px или пофиксить эту тему чтоб было плавно

$(document).ready(function() {
  var path = "img/back",







      header = $('.header'),

      i = 0,
      maxi = 41;



    $('html').mousewheel(function(event) {
      var deltaY = event.deltaY;
      if (deltaY < 0 && i < maxi) {
         i -= deltaY ;






      	$(header).css('background-image','url(' + path  +  i + '.jpg' +')');
        event.preventDefault();
        $(header).html(i);
           
      }
    });
});

Answer 1

[great_77]

$('#foo').on('mousewheel', function(e){
  e.preventDefault();
  return false;
}

setTimeout(function() {
  $('#foo').off('mousewheel');
}, 1000);