如何使用Fancybox 3库显示加载图标？调用方法报错求助

嘿，我完全懂你这种“旧API用不了，文档又没讲清楚”的烦躁！Fancybox 3确实对API做了不少重构，旧版的showLoading()/hideLoading()方法的调用方式已经变了，这也是你控制台报错的原因。

正确的调用方式 #

在Fancybox 3中，手动控制加载图标需要直接使用全局的Fancybox对象（而不是旧版的$.fancybox）：

• 显示加载图标：Fancybox.showLoading()
• 隐藏加载图标：Fancybox.hideLoading()

举个简单的测试例子，你可以直接在控制台里运行这段代码验证：

// 显示加载指示器
Fancybox.showLoading();

// 2秒后自动隐藏
setTimeout(() => {
  Fancybox.hideLoading();
}, 2000);

额外说明 #

1. 如果你是通过ES6模块引入Fancybox 3（比如用npm安装的版本），需要先确保正确导入：

import Fancybox from "@fancyapps/ui";

// 之后再调用方法
Fancybox.showLoading();

2. 如果你仍然在使用jQuery包装的Fancybox 3版本，也可以尝试$.fancybox.showLoading()，但官方现在更推荐原生JS的调用方式。
3. 另外，Fancybox 3默认会在加载内容时自动显示加载图标，如果你是想自定义触发时机，上面的手动调用方法就刚好适用。

内容的提问来源于stack exchange，提问作者RRN