background image problem

[burakk]

I have a slide element that has a background image set in css file. #main-slider .slide.slide-1{ background-image: url(../img/fon-1.jpg);}

In my script tag I have:

$('.slide').imagesLoaded( { background: true }, function() {
  $('#main-slider').addClass('loaded');
});

But when I load my page, plugin triggers loaded while my background image is still progressively loading from top to bottom on the browser.

There is a demo on https://fateful-industry.000webhostapp.com/index.html.

What can be wrong? My jquery version is jquery-3.2.1.