Question

我正在使用最新的fancybox 3库。我正在尝试显示加载图标。我已经阅读了文档（https://fancyapps.com/fancybox/3/docs/），但它对我没什么帮助。我看到了一些方法，比如showLoading（）和hideLoading（），但它在浏览器控制台中抛出错误，就像它们不是函数一样。

使用旧的fancybox lib即fancybox 1，我可以通过直接调用函数来实现。有人可以帮助我使用最新的图书馆吗？

Answer 1

要以编程方式显示加载动画，您需要在FancyBox的活动实例中执行此操作：

// Get the opened instance of fancybox
var instance = $.fancybox.getInstance();

或者如果以编程方式打开ir：

// Get the initialized fancybox
var instance = $.fancybox.open({
    // Your content and options
});

然后您可以显示或隐藏实例的加载动画，如下所示：

instance.showLoading( slide );
instance.hideLoading( slide );

必须在特定幻灯片上显示/隐藏加载动画。

要自定义加载动画，您可以覆盖默认加载模板。然后css取决于你：

// Changes the loading animation when opening a new instance
$.fancybox.open({

    // Loading indicator template
    spinnerTpl: '<div class="your-animation"></div>'

});

// Overrides the default template for all instances
$.fancybox.defaults.spinnerTpl: '<div class="your-animation"></div>';

您可以找到有关FancyBox options和api方法here的更多信息。

希望它有所帮助。

如何使用花式框3库显示加载图标

1 个答案: