Question

我正在使用bx-slider并面临滑块的页面加载图像未完全加载的问题。所有我想要的图像应该在页面加载后完全加载或在完成页面加载后加载，否则图像将隐藏直到页面未完全加载。这是java脚本代码

 $(window).load(function () { 
var $heroSlides = $('.hero-slider ul.bxslider > li');
        if ($heroSlides.length > 1) {
            var slider = $('.hero-slider .bxslider').bxSlider({
                responsive: true,
                auto: true,
                pause: 5000,
                controls: false,
                autoHover: true,
                mode: 'fade'
            });
        }
 });

Answer 1

试试这个 - 更新您的CSS并隐藏滑块外DIV

.hero-slider {
display:none;
}

然后在脚本中调用滑块之前显示它。

     $(window).load(function () { 
    $('.hero-slider').show();
    var $heroSlides = $('.hero-slider ul.bxslider > li');
            if ($heroSlides.length > 1) {
                var slider = $('.hero-slider .bxslider').bxSlider({
                    responsive: true,
                    auto: true,
                    pause: 5000,
                    controls: false,
                    autoHover: true,
                    mode: 'fade'
                });
            }
     });

如果document.ready不起作用，请尝试window.load。

bxslider在页面加载之前堆叠

1 个答案: