Flickity.js 图库在加载时崩溃

Question

我正在尝试加载一个简单的基于 js 的图库 - Flickity.js

如示例中所述，我尝试加载画廊，效果非常好。

但随机地，图库在页面加载时崩溃：

我用来启动画廊的代码：

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <script>
    $('.main-carousel').flickity({
        // options
        cellAlign: 'left',
        contain: true,
        pageDots: false,
    });
</script>

我知道这可能与启动脚本时的文档（图像未加载）有关，因此，我尝试包含 document.ready 函数，但实际上会引发另一个错误。

 $( document ).ready(function() {
     $('.main-carousel').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            pageDots: false,
        });
});

结果是，flickity 不是一个函数。

为什么会这样？

Answer 1

尝试使用

$(window).on('load', function() {
    // your code here
});

因为 $(document).ready 仅在加载 DOM (HTML) 时触发。

编辑：此外，由于您正在使用 Juicer。io/embedjs，您应该在 Flickity 之前导入它，因为它已经包含 JQuery（并删除独立 JQuery 导入):

<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
    $(window).on('load', function() {
        $('.carousel').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            pageDots: false,
            adaptiveHeight: true
        });
    });
</script>

http://jsfiddle.net/pycfs5e8/

如果出于某种原因您仍然需要导入 JQuery，您也可以使用没有 JQuery 版本的 Embed（未测试）：

<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>

Flickity.js 图库在加载时崩溃

Flickity.js gallery crashes on load

javascript

jquery

html

flickity