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

我希望它有效！

在Lightslider运行之前预加载图像

1 个答案: