0

我正在使用 bxSlider 库开发一个站点。使用默认设置，它在 Chrome 和 Firefox 中都表现良好。

HTML是标准：

<div id="home_title_gallery">
<span class="bxslider_stepback" id="bxslider_PagesTitle_1_left"></span>
<span class="bxslider_stepforward" id="bxslider_PagesTitle_1_right"></span>
<div class="bxslider" id="bxslider_PagesTitle_1">
<div id="bxslider_PagesTitle_1_0">
<img src="/custom/public/images/.slider-01.980.435.0.1.c.png" alt="" title="" data-caption="" data-description="" id="bxslider_PagesTitle_1_0_2500"></div>
<div id="bxslider_PagesTitle_1_1">
<img src="/custom/public/images/.slider-02.980.435.0.1.c.png" alt="" title="/gluten-free-wheat-free-recipes" data-caption="" data-description="" id="bxslider_PagesTitle_1_1_2501"></div>
<div id="bxslider_PagesTitle_1_2">
<img src="/custom/public/images/.slider-03.980.435.0.1.c.png" alt="" title="" data-link="/nutrition-media" data-caption="" data-description="" id="bxslider_PagesTitle_1_2_2502"></div>
<div id="bxslider_PagesTitle_1_3">
<img src="/custom/public/images/.slider-04.980.435.0.1.c.png" alt="PureBred Gluten Free Bread Wheat Free Bread" title="PureBred Gluten Free Wheat Free Bread" data-caption="" data-description="" id="bxslider_PagesTitle_1_3_2503"></div>
<div id="bxslider_PagesTitle_1_4">
<img src="/custom/public/images/.slider-05.980.435.0.1.c.png" alt="" title="" data-caption="" data-description="" id="bxslider_PagesTitle_1_4_2504"></div>
<div id="bxslider_PagesTitle_1_5">
<img src="/custom/public/images/.slider-06.980.435.0.1.c.png" alt="" title="" data-caption="" data-description="" id="bxslider_PagesTitle_1_5_2505"></div>
</div>
</div>

（以前，它是嵌套 div ul，而li不是嵌套 div。但是，行为是相同的。）

bxSlider 库是这样启动的：

app.onload(function(){
    $('.bxslider').each(function() {
        var id = $(this).attr('id');
        var right_arrow = app.get(id + '_right');
        var left_arrow  = app.get(id + '_left');
        $(this).bxSlider({
            'pager': false,
            'auto': true,
            'nextSelector': right_arrow,
            'prevSelector': left_arrow,
            'nextText': 'Step forward',
            'prevText': 'Step back'
        });
    });
});

我使用的是我们的 homegrown app.onload()，而不是$(document).ready()，因为我实际上不希望画廊在加载图像之前开始滑动。这是功能：

var app = {
    get: function(id) {
        return document.getElementById(id);
    },
    onload: function(func) {
        // http://www.dustindiaz.com/top-ten-javascript/
        var oldonload = window.onload;
        if (typeof window.onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            };
        }
    },
    onunload: function(func) {
        // based on above
        var oldonunload = window.onunload;
        if (typeof window.onunload !== 'function') {
            window.onunload = func;
        } else {
            window.onunload = function() {
                if (oldonunload) {
                    oldonunload();
                }
                func();
            };
        }
    }
};

这在 Firefox 中运行良好，但在 Chrome 中似乎是随机的。稍微超过一半的时间，javascript 根本无法运行，我在页面下方一直留下一组大图像，根本没有滑动。Chrome 调试器中没有显示相关的错误消息。在几个地方添加console.log()表明我们确实到达了函数$(this).bxSlider()（console.log()无论如何都会触发它的正上方），但它没有做任何事情。

我怎样才能弄清楚这里发生了什么，我该如何解决？

我曾经认为这与自定义上一个和下一个按钮有关。当我把它们拿出来时它起作用了：

        $(this).bxSlider({
            'pager': false,
            'auto': true,
        });

但现在我认为这只是平局的运气（它的行为不正常，记住）。现在没有它们也行不通。嗯，有时确实如此。更多时候不是。

4

0 回答 0