javascript - bxslider 在页面加载之前堆叠

Question

我正在使用 bx-slider 并面临一个问题，即 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并隐藏 slider 外部DIV

.hero-slider {
display:none;
}

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

     $(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'
                });
            }
     });

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