Préchargement des images avant Lightslider

Question

J'essaie de forcer Lightslider (http://sachinchoolur.github.io/lightslider/index.html) à ne fonctionner qu'après que toutes ses images et contenus aient été chargés. Comment cela peut-il être fait? J'ai atteint l'objectif avec le code ci-dessous, mais sur Chrome, il se déclenche toujours une erreur:

Uncaught TypeError: Impossible de lire la propriété « pause » undefined

Cette erreur n'empêche pas le comportement d'être correct, mais nous ne pouvons pas avoir les erreurs de tir en raison de normes obligatoires.

Avez-vous des indices pour résoudre ce problème?

<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

Essayez d'envelopper la création de votre lightSlider dans

$(window).load(function() { 

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

}); 

Et ne pas appeler pause() et jouer().

En règle générale, si vous allez travailler avec des images et s'attendre à charger, alors il est préférable de code à l'intérieur $ (fenêtre) .load

J'espère que ça marche!