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>

Flickity.js图库在加载时崩溃

1 个答案: