在运行Lightslider之前预加载图像

Question

我正在尝试强制Lightslider (http://sachinchoolur.github.io/lightslider/index.html)仅在其所有图像和内容加载后才运行。如何做到这一点？我已经用下面的代码实现了这个目标，但是在Chrome上它总是会触发一个错误：

未捕获的TypeError:无法读取未定义的属性“”pause“”

此错误不会阻止行为的正确性，但我们不能因为强制标准而触发错误。

你有任何关于如何解决这个问题的线索吗？

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

});

不要调用pause()和play()。

一般来说，如果您要处理图像并希望加载它们，那么最好在$(window).load内编写代码

我希望它能起作用！