javascript - 在弹出窗口中使用延迟加载

Question

我尝试在弹出窗口中实现延迟加载。 对于延迟加载，我使用 Echo.js ( http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/ )

在表格中，我有这样的单元格:

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

正如你所看到的，在我的单元格中，我可以看到一个加载 gif，并根据拇指加载的位置。 效果很好

现在我想在弹出窗口中加载全尺寸图像 我想使用完全相同的技术来避免加载页面的所有全尺寸图像

我保留相同的表格/单元格内容，并在我的页面中添加一个隐藏的 div，包括

<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 src='loader.gif' data-echo='image.jpg' class='img-rounded'>
  </div>
</div>

我被困在这里，我只看到弹出窗口内的加载 gif，而不是我应该看到的 image.jpg

这是我用于弹出窗口的 JS

$(".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();
};

你看出什么地方出了问题或者我错过了什么吗？

这是我第一次尝试这个主题， 所以我已经阅读了其他线程，但我找不到在我的配置中重现结果的方法

Answer 1

使用上面的注释，我只是稍微更改了与 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来解决我的问题