sliderProが設置されてるページで読み込みが完了してから表示させたい

Question

sliderProの表示が凄く遅く遷移時に読み込み完了するまでスライドが縦に並んで表示され続けているので
早くページを表示させる方法を探してました。
sliderProの配布もとでlazy loadingを入れてみたのですが、表示の際に変化はありません。
$(document).ready(function()を$(window).load(function()に変更するとスライダーが機能しません。
レクチャーいただければ幸いです。

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