Estoy buscando una manera de acelerar la visualización de sliderPro. He intentado agregar lazy loading desde la distribución sliderPro, pero no hay cambios en la pantalla. Si cambio $(documento).ready(función()) a $(ventana).load(función()), el control deslizante no se mueve.
<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 -->