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

Question

我正在使用 tippy.js 生成工具提示。一切正常，但是我有很多工具提示，每个工具提示都加载了不同的图像内容。为了减少加载时间，我想延迟加载图像以仅在工具提示可见时显示。

我知道 tippy.js 有一个内置函数来调用 AJAX 内容 (https://atomiks.github.io/tippyjs/ajax/) - 但是我想加载的内容在 HTML 中，我不想为每个工具提示编写单独的 javascript。理想情况下，以某种方式获取我悬停的特定提示的 img scr 并调用它以加载 onShow(instance) ~ 即 fetch('$(this).find("img").data("源代码");')。我尝试了一些变体，但没有任何效果。

这是一个代码笔(没有)延迟加载图像: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