Javascript 在popover中使用延迟加载

我试图在popover中实现一个延迟加载。 对于lazyload，我使用Echo.js（）

在表格中，我有如下单元格：

<td>
  <a id='pop-ID' class='pop'>
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
  </a>
</td>

你知道我错了什么或错过了什么吗

这是我第一次尝试这个话题，

---

因此，我已经阅读了其他线程的相关内容，但是我找不到在配置中重现结果的方法，使用上面的注释，我只是稍微更改了与image.jpg相关的行

<td>
  <a id='pop-ID' class='pop'>
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
  </a>
</td>

<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
  <div class='popTitle'>PopOver Title</div>
  <div class='popContent'>
    <img data-src='image.jpg' class='lazyload img-rounded'>
  </div>
</div>

流行歌曲标题

现在它工作了，谢谢

---

我现在将尝试更广泛地使用lazysizes来解决我的问题

这是因为普通的lazyloader只对滚动事件进行重新操作，并且只对静态内容进行重新操作。使用lazySizes（），这个lazyloader自动处理动态内容。容易的。

$(".pop").each(function() {
  var $pElem= $(this);
  $pElem.popover(
    { 
      placement: 'left',
      trigger: 'hover',
      html : true,
      title: getPopTitle($pElem.attr("id")),
      content: getPopContent($pElem.attr("id"))
    }
  );
});

function getPopTitle(target) {
  return $("#" + target + "_content > div.popTitle").html();
};

function getPopContent(target) {
  return $("#" + target + "_content > div.popContent").html();
};

<td>
  <a id='pop-ID' class='pop'>
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
  </a>
</td>

<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
  <div class='popTitle'>PopOver Title</div>
  <div class='popContent'>
    <img data-src='image.jpg' class='lazyload img-rounded'>
  </div>
</div>