jquery - Flickity slider 在刷新之前不起作用

Question

我有flickity slider页面加载时应该看起来不错。但页面加载时图像混搭。只有刷新页面一两次后才可以顺利运行。

您可以在此处找到出现意外行为的网站: DEMO

代码

<script type="text/javascript">
$('.main-gallery').flickity({
  wrapAround: true,
  freeScroll: true
});
$(window).load(function() {
$('.gallery').flickity().focus();
});
</script>

任何帮助将不胜感激!提前致谢!

Answer 1

您忘记使用$(document).ready()。阅读 here why you should use this .

具体来说，如果您想绝对确定图像已加载，您可以使用:

$(window).load(function () {
    $('.main-gallery').flickity({
        wrapAround: true,
        freeScroll: true,
        lazyLoad: 3
    });
});

这是因为 $(window).load() 仅当 DOM 和所有图像都加载时才会执行。

此外，您可以使用 lazyLoad选项以确保加载相邻单元格中的图像。为了使其正常工作，请确保 slider 中的图像数量多于页面的宽度。有了这些，一切都应该正常工作。

DEMO