tippy.js工具提示中的延迟加载图像？

Question

我正在使用tippy.js生成工具提示。一切都很好，但我有分配的工具提示每个不同的图像内容加载。为了减少加载时间，我想在工具提示可见时将图像延迟加载到apear。

我知道tippy.js有一个内置函数来调用AJAX内容（https://atomiks.github.io/tippyjs/ajax/）-但是我想要加载的内容是超文本标记语言，我不想为每个工具提示编写单独的javascript。理想情况下，以某种方式获取我正在悬停的特定提示的img scr，并调用它来加载onShow（实例）~即获取（'$（this）。查找（"img"）。数据（"src"）；）。我尝试了一些变体，但没有任何效果。

下面是一个代码笔（不带）延迟加载图像：https://codepen.io/jinch/pen/aboNOvP?editors=1010

我曾尝试在他们的网站上操作AJAX示例，但没有成功（见下文）。

tippy('body .tippy', {
            theme: 'google',
            touchHold: true,
            hideOnClick: false,
            interactive: true,
            placement: 'left',
            distance: 20,
            arrow: true,
            animateFill: false,
            animation: 'shift-away',

              onShow(instance) {
                if (instance.state.ajax === undefined) {
                  instance.state.ajax = {
                    isFetching: false,
                    canFetch: true,
                  }
                }
                if (instance.state.ajax.isFetching || !instance.state.ajax.canFetch) {
                  return
                }

                fetch('$(this).find("img").data("src")')
                  .then(response => response.blob())
                  .then(blob => {
                  })
                  .catch(error => {
                    // ...
                  })
                  .finally(() => {
                    instance.state.ajax.isFetching = false
                  })
              },
              onHidden(instance) {
                instance.setContent('Loading...')
                instance.state.ajax.canFetch = true
              },
          })

理想的结果是仅在调用时加载图像，以减少页面的初始加载时间。

Answer 1

感谢@atomiks，您可以在这里找到答案：https://github.com/atomiks/tippyjs/issues/562#issuecomment-521650755