Предварительная загрузка изображений до запуска Lightslider

Question

Я пытаюсь заставить Lightslider (http://sachinchoolur.github.io/lightslider/index.html) запускать только после загрузки всех его изображений и содержимого. Как это может быть сделано? я достиг цели на код ниже, но на Chrome всегда срабатывает ошибка:

Uncaught TypeError: Не удается прочитать свойство «пауза» на неопределенный

Эта ошибка не мешает поведение не верно, но мы не можем стрелять из-за обязательных стандартов.

У вас есть ключи к тому, как это решить?

<link rel="stylesheet" href="css/lightslider.css"/> 

<script language="JavaScript" type="text/javascript" src="Js/jquery.js"></script> 

<script language="JavaScript" type="text/javascript" src="Js/lightslider.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

$('#image-gallery').lightSlider({ 
     gallery: true, 
     item: 1, 
     thumbItem: 6, 
     slideMargin: 0, 
     thumbMargin: 5, 
     animateThumb: true, 
     cssEasing: 'ease', 
     easing: 'linear', 
     speed: 500, 
     pause: 3000, 
     auto: true, 
     loop: true, 
     onSliderLoad: function() { 
      $('#image-gallery').removeClass('cS-hidden');       
     } 
    }); 
    $('#image-gallery').autoplaySlider.pause(); 
}); 
$(window).load(function() { 
    $('#image-gallery').autoplaySlider.play(); 
}); 
</script> 

Answer 1

Попробуйте обертывание вашего творения lightSlider в

$(window).load(function() { 

    $('#image-gallery').lightSlider({ 
     gallery: true, 
     item: 1, 
     ... 

}); 

И не называйте паузу() и играть().

Как правило, если вы собираетесь работать с изображениями и ожидать, что они будут загружены, то лучше закодировать внутри $ (окна) .load

Я надеюсь, что это работает!