javascript - 在绑定(bind)之前等待 Font Awesome JS 将 i 转换为 svg

Question

在绑定(bind)到由 Font Awesome JS 生成的 Font Awesome 元素时，我遇到了一些问题 <i>至 <svg> .

我正在尝试使用 tooltipster将自定义 HTML 元素附加到 <i>像这样在我的 Laravel 5 应用程序中标记

Blade

<i class="fa fa-ellipsis-h doc-settings room-image-settings-tooltip" data-tooltip-content="#room_image_settings_{{$key}}" aria-hidden="true"></i>

JS

//Tooltip enable
$('.room-image-settings-tooltip').tooltipster({
    theme: 'tooltipster-punk',
    trigger: 'click',
    animation: 'grow',
    minWidth: 300,
    interactive:true,
    animationDuration:200
});

这导致 Font Awesome 创建这样的 SVG

如您所见，效果很好。它接管了所有属性。问题是，如果没有 font awesome 5，当它保持为 <i> 时它可以很好地绑定(bind)。元素，但在转换为 <svg> 时，即使上面的工具提示 js 位于文档就绪标签内，工具提示代码也必须在控制台中重新运行才能使其工作并绑定(bind)到 <svg>。 .

我的 JS 正在按此顺序加载

app.js

require('@fortawesome/fontawesome-pro/js/all');

$(document).ready(function(){
   //Tooltip enable
   $('.room-image-settings-tooltip').tooltipster({
       theme: 'tooltipster-punk',
       trigger: 'click',
       animation: 'grow',
       minWidth: 300,
       interactive:true,
       animationDuration:200
   });
});

那么 Font Awesome 应该在工具提示代码之前运行并且应该正确绑定(bind)到新的 SVG 元素？

我是不是理解错了？在深处的某个地方是 <i>至 <svg>代码在文档就绪标签中运行，并在我自己的 app.js 文件之后运行？

我如何监听 SVG 何时完成转换并运行 JS？

Answer 1

Font awesome 有专门的监听器。在联系了 font awesome 5 的支持后，他们指示我查看文档以收听已完成的 <i>至 <svg>转换。

function iconDoneRendering () {
    console.log('Icons have rendered')
}

dom.i2svg({ callback: iconsDoneRendering })

从 5.7.0 版本开始，该方法还支持 Promise API:

dom.i2svg()
  .then(function () {
    console.log('Icons have rendered')
  })

Source