I am looking for a way to speed up the display of sliderPro. I have tried adding lazy loading from the sliderPro distribution, but there is no change in the display. If I change $(document).ready(function()) to $(window).load(function()), the slider does not move.

  <script src="js/slider/dist/js/jquery.sliderPro.min.js"></script>
  <link rel="stylesheet" href="js/slider/dist/css/slider-pro.min.css"/>
  <script>
    $(document).ready(function(){
      $( '#clinic' ).sliderPro({
        width: 750,
        height: 500,
        fade: true,
        arrows: true,
        buttons: false,
        fullScreen: false,
        shuffle: false,
        thumbnailArrows: true,
        autoplay: false,

      });
    });
  </script>  

<h2 class="low">text</h2>
<div class="slider-pro" id="clinic">
<?php
$imglist = [
'xx' => 'clinic_01.jpg',
'xxx' => 'clinic_02.jpg',
'xxx' => 'clinic_03.jpg',
'xxxx' => 'clinic_04.jpg',
'xxxx' => 'clinic_05.jpg',
'xxxx' => 'clinic_06.jpg',
'xxxx' => 'clinic_07.jpg',
'xxxx' => 'clinic_08.jpg',
'xxxxx' => 'clinic_09.jpg',
'xxxxx' => 'clinic_10.jpg',
'xxxxx' => 'clinic_11.jpg',
'xxxxx' => 'clinic_12.jpg',
'xxxxx' => 'clinic_13.jpg',
'xxxxxx' => 'clinic_14.jpg',
'xxxxxx' => 'clinic_15.jpg'
];

$max_num = 15;

$tpl =<<<EOT
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="images/gallery/%s" alt="%s">
<p class="sp-layer sp-white sp-padding" data-position="bottomLeft" data-src="images/gallery/%s" data-vertical="0" data-width="100%%" data-show-transition="up">%s</p>
</div>
</div>
EOT;
$count = 0;
foreach ($imglist as $alt=>$imgfile)
if (++$count < $max_num) printf($tpl . PHP_EOL, $imgfile, $alt, $alt, $alt);
else break;

?>
<div class="sp-thumbnails">
<?php
$tpl =<<<EOT
<img class="sp-thumbnail" src="images/gallery/%s" alt="%s">
EOT;
foreach ($imglist as $alt=>$imgfile)
printf($tpl . PHP_EOL, $imgfile, $alt);
?>
</div><!-- sp-thumbnails -->
</div><!-- slider-pro -->