bxslider 在加载时计算错误的视口大小答案

【问题标题】：bxslider calculating wrong viewport size on loadbxslider 在加载时计算错误的视口大小
【发布时间】：2012-12-05 11:30:07
【问题描述】：

无论如何，我最近开始使用 bxslider，但遇到了问题。

它似乎在页面加载时错误地计算了它的视口大小，这意味着它在移动设备、平板电脑等上无法正常工作。

奇怪的是，当我调整浏览器窗口的大小（即使只是一个像素）时，视口高度会被正确计算并且一切看起来都很好。但是，如果我刷新具有相同高度和宽度的页面，bx-viewport 将无法正确计算。

知道为什么会这样吗？

HTML 看起来像这样（是的，我知道它可能与它没有任何关系，但仍然如此）：

<ul class="seminars-slider">
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>

    // same li
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>
</ul>

js 调用如下：

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});

jQuery('.up-control').click(function() {
    slider.goToNextSlide();
});
jQuery('.down-control').click(function() {
    slider.goToPrevSlide();
});

谢谢。

【问题讨论】：

标签： jquery css bxslider

【解决方案1】：

可能是您过早调用 bxSlider 函数。如果您从

调用它

$(document).ready(function() { ... });

考虑改用

$(window).load(function() { ... });

使用这两个函数的区别在于 (document).ready 等到 DOM 以初始状态显示给用户，而 (window).load 实际上等到所有资源都加载到 DOM 上。

【讨论】：

@LionLiu 我有点晚了，但很高兴你发现它有用！
我实际上已经在这样做了，并且设置了一个计时器来重新加载高度......而且它仍然比内容短。
如果我不想等到资源加载完毕怎么办？由于该网站有大图像，我不想让滑块等那么久。我知道这是一个奇怪的案例，但无能为力
这确实为我解决了最初的问题，但滑块只显示列表中的最后一张幻灯片，并没有前进到下一张幻灯片。关于如何解决这个问题的任何想法？

【解决方案2】：

你可以使用

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});
setTimeout(function(){
            slider.redrawSlider();
        },100);

【讨论】：

【解决方案3】：

bxslider github 页面上的“romemelederos”建议；

“BxSlider v4.1 - 由于我在移动响应式网站中使用高度百分比来呈现滑块，因此出现了问题。

所以我不得不做出改变从： slider.viewport.css('height', getViewportHeight()); 对此： slider.viewport.css('height', '');

我在副本中使用选项更改了插件，但最快的更改方法是修改上面的行“

我在第 1290 行编辑了我的 jquery.bxslider.js；这对我来说非常有用，而且似乎比 window.load 更好，（使用 window.load 时，滑块会被破坏，直到所有内容都加载完毕。）

【讨论】：

【解决方案4】：

如果您使用 ajax 加载 <ul> 元素并且它包含图像，请在加载后尝试 slider.reloadSlider();。首先我使用了

setTimeout('slider.reloadSlider()',1000);

等待图像加载，但最终我切换到了漂亮的库ImagesLoaded，它将等待图像加载：

imagesLoaded('.seminars-slider', function() {
   slider.reloadSlider();
});

（更改了变量名以匹配问题）

【讨论】：

【解决方案5】：

Matthew Watson 给了我一个好主意，我进入插件并更新了实际的 getViewPortHeight() 函数，如下所示：

var getViewportHeight = function(){
    var height = 0;
    children = slider.children;
    height = jQuery(slider.children[0]).height();;
    return height;
}

所以现在它正在获取其中第一张图像的高度（希望它们都相同......）并使用它来确定滑块的高度。请注意，您的控件仍将位于滑块下方，但这可以通过 css 定位等进行修复。

希望这可以帮助一些迷路的人。

【讨论】：

【解决方案6】：

找到了解决这个 safari 错误的方法。您必须将滑块的模式设置为水平（不确定垂直是否也有效，但淡入淡出根本不起作用）。然后你必须得到第一张图像的高度并将其传递给“.bx-viewport”。这是我的脚本的样子：

$( "img.Banner" ).attr( "id", "first-slide" );
$('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'horizontal',
  auto: true
  });
$("#first-slide").load(function(){
  var height = $(this).height();
   $( ".bx-viewport" ).css( "height", height );
});

【讨论】：