时间戳

首页 > 解决方案 > 如何使用精美的 box 3 库显示加载图标

javascript - 如何使用精美的 box 3 库显示加载图标

问题描述

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

使用旧的fancybox lib，即fancybox 1，我可以通过直接调用函数来做到这一点。有人可以帮我看看最新的图书馆吗？

标签： javascriptjqueryfancybox-3

解决方案

要以编程方式显示加载动画，您需要在 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选项和api方法的信息。

希望能帮助到你。

推荐阅读