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,
        });
});

其结果是，它表明跳动不是功能。

为什么会这样呢？

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>